/**
<576px	sm 
≥576px	md
≥768px	lg
≥992px	xl
≥1200px	xxl
≥1400px
*/

/* ----- 공통 변수 ----- */
:root {
  --max-width: 1280px;

  /* [모바일 중심 고정폭 레이아웃] 마쌤 프론트 앱 셸(.shop-wrap 등)에만 쓰는 전용 변수 - 기존 --max-width(1280px,
     여러 레거시/미사용 selector가 함께 참조 중)는 그대로 두고 이 변수 하나만 새로 추가해 영향 범위를 분리한다. */
  --shop-app-width: 600px;

  --shop-primary: #3b82f6;
  --shop-primary-dark: #2563eb;
  --shop-primary-light: #eff6ff;
  --shop-accent: #f59e0b;
  /* 포인트 황금색 */
  --shop-bg: #f8f7ff;
  --shop-card-bg: #ffffff;
  --shop-text: #1e1b4b;
  --shop-text-sub: #6b7280;
  --shop-border: #e5e7eb;
  --shop-header-h: 56px;
  --shop-region-h: 44px;
  --shop-bottom-h: 60px;
  --shop-header-total: calc(var(--shop-header-h) + var(--shop-region-h));
}


/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/


html {
  font-size: calc(16px + (4 * ((100vw - 1280px) / (1280 - 360))));
  /*font-size: calc(16px + 0.15vw);*/
}

@media screen and (min-width: 1451px) {
  html {
    font-size: 16px;
  }
}

@media screen and (max-width: 576px) {
  html {
    font-size: 16px;
  }
}

body {
  font-family: 'Pretendard', 'Paperlogy', 'SUIT', 'Noto Sans KR', sans-serif;
  color: #000000;
  font-weight: 300;
  font-size: 1em;
  /* [모바일 중심 고정폭 레이아웃] PC에서 .shop-wrap(600px)이 가운데 정렬될 때 좌우 바깥 영역을 구분하기 위한
     배경 - 새 색상을 만들지 않고 이 테마에 이미 있는 연한 회색 토큰(--shop-border)을 재사용한다. 모바일(<600px)에서는
     .shop-wrap이 100% 폭이라 이 배경이 가려져 보이지 않으므로 별도 미디어쿼리가 필요 없다. 관리자(/_super/)는
     이 style.css 자체를 로드하지 않아 영향 없다. */
  background: var(--shop-border);
  /* [60번 - PC 강제 모바일 레이아웃] 셸(600px) 안에서 아직 원인을 특정하지 못한 개별 요소가 폭을 넘기더라도
     가로 스크롤/우측 여백 붕괴로 번지지 않게 하는 안전장치(표준적인 body 레벨 클리핑). overflow-y는 건드리지
     않아(x만 지정) 문서 전체 스크롤과 #shop-header/.shop-detail-tab-bar 등 기존 position:sticky 요소의 동작에는
     영향이 없다 - 이 두 selector가 이미 body 최상위 문서 스크롤 컨텍스트를 그대로 쓰고 있음을 코드로 확인. */
  overflow-x: hidden;
}

.ft-spoqa {
  font-family: 'SpoqaHanSansNeo';
}

.ft-suit {
  font-family: 'SUIT';
}

.ft-nexon {
  font-family: 'NEXON Gothic';
}

.ft-gmaket {
  font-family: 'GmarketSans';
}

.ft-pretendard {
  font-family: 'Pretendard';
}

.ft-paperlogy {
  font-family: 'Paperlogy';
}


ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a,
select,
input[type=text],
input[type=password],
button {
  vertical-align: middle;
}

h1,
h2,
h3,
h4,
h5,
h6 {}

input[type=password] {
  font-family: 'pass', 'Roboto', Helvetica, Arial, sans-serif;
}

input[type=text]:read-only,
input[type=text]:focus:read-only {
  background: #efefef;
}

input::placeholder,
select::placeholder {
  color: #adadad !important;
}

textarea::placeholder {
  color: #adadad !important;
}

.badge {
  font-family: 'SUIT', 'Noto Sans KR', sans-serif;
}

.sound_only {
  display: none;
}

.wrap {
  min-width: 300px;
}

main {
  position: relative;
  overflow: hidden;
  width: 100%;
}


main .container {
  position: relative;
  min-width: 344px;
}

main .m-container {
  min-height: 500px;
}


@media (min-width: 576px) {
  main {
    min-height: 400px;
  }
}

@media (min-width: 768px) {
  main {
    min-height: 500px;
  }
}

@media (min-width: 992px) {
  main {
    min-height: 700px;
  }
}

@media (min-width: 1200px) {

  main.full .m-container,
  main.full .h-container {
    max-width: 100% !important;
  }
}

main.narrow .container {
  max-width: var(--max-width);
}



/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.katok-btn {
  position: fixed;
  display: inline-block;
  right: 140px;
  bottom: 45px;
  z-index: 996;
  transition: all 0.4s;
  opacity: 0.7;
}

.katok-btn img {
  height: 45px;
}

.navertok-btn {
  position: fixed;
  display: inline-block;
  right: 15px;
  bottom: 45px;
  z-index: 996;
  transition: all 0.4s;
  opacity: 0.7;
}

.navertok-btn img {
  height: 45px;
}

.katok-btn:hover,
.navertok-btn:hover {
  opacity: 1;
}

.back-to-top {
  visibility: hidden;
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  /* [모바일 중심 고정폭 레이아웃] position:fixed는 .shop-wrap 폭과 무관하게 뷰포트 기준이라, PC에서 셸이
     가운데로 좁아져도 그대로 두면 이 버튼만 브라우저 실제 오른쪽 끝에 남는다. 셸의 오른쪽 경계 + 16px로
     계산한다(모바일에서는 (100vw - 600px)가 음수가 되어 max()가 항상 16px를 선택 - 동작 그대로 유지).
     hover의 translateY(-2px)와 별도 축이라 transform 충돌 없음(기존 transform을 덮어쓰지 않음). */
  right: max(16px, calc((100vw - var(--shop-app-width)) / 2 + 16px));
  bottom: calc(var(--shop-bottom-h) + 12px);
  width: 40px;
  height: 40px;
  background: var(--shop-primary);
  color: #fff;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 489;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
  text-decoration: none;
  transition: opacity 0.2s;
}

.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #00c27b;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
  opacity: 0.85;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}



/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  position: relative;
  background: rgba(255, 255, 255, 0.8);
  /*border-bottom: 1px solid rgba(255, 255, 255, 0.1);*/
  transition: all 0.5s ease-out;
}

#header:hover {
  background: rgba(255, 255, 255, 0.8);
}

.sub-wrap #header {
  background: #616161;
  position: relative;
}

#header.header-scrolled,
#header.header-inner-pages {
  /*background: rgba(40, 40, 40, 0.9);*/
}

#header .container {
  max-width: var(--max-width);
}

#header .container-fluid {
  z-index: 2;
}

#header .logo {
  margin: 0;
  padding: 0;
  line-height: 3rem;
  letter-spacing: 0.5px;
  font-size: 3.2rem;
  font-weight: 200;
  font-family: 'Monoton';
  word-break: keep-all;
  white-space: nowrap;
}

#header .logo img {
  max-height: 5.5rem;
}


#header .sub-menu {
  position: absolute;
  top: 2.4rem;
  left: 50%;
  display: none;
  min-width: 210px;
  transform: translateX(-50%);
  overflow: hidden;
  z-index: 3;
  padding: 14px 0;
  margin: 0;
  word-break: keep-all;
  white-space: nowrap;
}

#header .sub-menu .arrow-up {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: #fff;
}

#header .sub-menu .arrow-up:after {
  content: '';
  position: absolute;
  width: 86%;
  height: 86%;
  top: 0;
  left: 0;
  transform: rotate(-45deg);
  border-top: 1px solid #dfdfdf;
  border-right: 1px solid #dfdfdf;
  z-index: 2;
}

#header .sub-menu .sub-menu-cont {
  position: relative;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 3px;
  background: #fff;
  float: none;
  z-index: 1;
  margin: 0;
  padding: 0;
}

#header .sub-menu ul {
  position: relative;
  overflow: hidden;
  float: none;
  list-style: none;
  margin: 0;
  padding: 0.8rem;
}

#header .sub-menu li {
  display: block;
  width: 100%;
  padding: 0.2rem 0 0 1rem;
}

#header .member-info {
  font-size: 1rem;
  display: flex;
  position: relative;
  align-content: center;
  align-items: center;
}

#header .member-info:hover .sub-menu {
  display: block;
}

#header .win-memo,
#header .win-note {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #dfdfdf;
  vertical-align: middle;
  width: 2.5rem;
  height: 2.5rem;
  line-height: calc(2.5rem - 1px);
  text-align: center;
}

#header .win-memo .badge,
#header .win-note .badge {
  position: absolute;
  top: -6px;
  right: -6px;
}

#header .win-memo:hover .sub-menu {
  display: block;
}

#header .win-memo ul.ajax-memo-list {
  width: 100%;
  list-style: none;
}

#header .win-memo ul.ajax-memo-list li {
  width: 100%;
  text-align: left;
  padding: 0 0.8rem;
  line-height: 1.4rem;
  overflow-x: hidden;
  word-break: keep-all;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#header .win-memo .win_memo {
  display: inline-block;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

#header .win-note {
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #dfdfdf;
  vertical-align: middle;
  width: 2.5rem;
  height: 2.5rem;
}

#header .win-note:hover .sub-menu {
  display: block;
}

#header .win-note ul.ajax-alim-list {
  width: 100%;
  list-style: none;
}

#header .win-note ul.ajax-alim-list li {
  width: 100%;
  text-align: left;
  padding: 0 0.8rem;
  line-height: 1.4rem;
  overflow-x: hidden;
  word-break: keep-all;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#header .adm_btn {
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
  width: 1.8rem;
  height: 1.8rem;
  line-height: 1.8;
  text-align: center;
}

.pf-img {
  display: inline-block;
  badckground-repeat: no-repeat;
  background-size: cover !important;
  border-radius: 50%;
  border: 1px solid #dfdfdf;
  vertical-align: middle;
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 5px;
}

#header span.vt {
  display: inline-block;
  width: 2px;
  height: 3.3rem;
  border-right: 2px solid #ddd;
}

@media (max-width: 991px) {
  #header .logo img {
    max-height: 4rem;
  }

  #header .logo {
    font-size: 2.6rem;
  }

  #header #navbar2 {
    position: absolute;
    right: 10px;
    vertical-align: middle;
  }

  #header #navbar2>a,
  #header #navbar2>span {
    line-height: 30px;
    font-size: 1.4rem;
  }
}

@media (max-width: 767px) {
  #header .logo img {
    max-height: 4.5rem;
  }

  #header .logo {
    align-self-items: center;
    font-size: 2rem;
  }
}

@media (max-width: 578px) {
  #header span.vt {
    width: 2px;
    height: 2.5rem;
    border-right: 1px solid #ddd;
  }

  #header .logo img {
    max-height: 4.5rem;
  }
}


#header .swiper-button-next,
#header .swiper-button-prev {
  width: 90px !important;
  z-index: 10;
  color: #000 !important;
  text-align: center;
  line-height: 24px;
}

#header .swiper-button-prev {
  left: 0px !important;
  background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%) !important;
}

#header .swiper-button-next {
  right: 0px !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%) !important;
}

#header .swiper-button-next:after,
#header .swiper-button-prev:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px !important;
  font-weight: 800;

}

#header .swiper-button-next:after {
  right: 10%;
}

#header .swiper-button-prev:after {
  left: 10%;
}

#header .swiper-button-next.swiper-button-disabled,
#header .swiper-button-prev.swiper-button-disabled {
  opacity: 0 !important;
  display: none !important;
}


/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
  position: relative;
}

.navbar>ul {
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
  justify-content: space-between;

}


.navbar li {
  position: relative;
}

.navbar>ul>li {
  position: relative;
  white-space: nowrap;
  margin: 0;
  padding: 0.5rem 0;
  text-align: center;
}

.navbar>ul>li>span {
  display: inline-block;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  right: 0;
  border-right: 1px solid #adadad;
  height: 20px;

}

.navbar>ul>li:last-child>span {
  display: none;
}

.navbar.static>ul {
  width: 100%;
}

.navbar.static>ul>li {
  flex-grow: 1;
}

.navbar li>a,
.navbar li>a:focus {
  width: 100%;
  padding: 0;
  height: 2rem;
  line-height: 2rem;
  font-size: 1.1rem;
  font-weight: 400;
  color: #000;
  ;
  white-space: nowrap;
  transition: 0.1s;
  position: relative;
  text-align: center;
}

.navbar li>a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
  color: #006699;
  font-weight: 500;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 50px);
  margin: 0;
  padding: 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 4px 10px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-top: 3px solid #192d79;
  border-radius: 0 0 0.5rem 0.5rem;
  overflow: hidden;
}

.navbar .dropdown ul li {
  min-width: 180px;
}

.navbar .dropdown ul a {
  display: inline-block;
  width: 100%;
  padding: 0;
  text-align: center;
  height: 2.8rem;
  line-height: 2.8rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: #282828;
}

.navbar .dropdown ul a:hover {
  background: #E7F6FF;
  color: #FF0004;
  font-weight: 600;
}

.navbar .dropdown ul a i {
  font-size: 1rem;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
  color: #0d6efd;
}

.navbar .dropdown:hover>ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover>ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover>ul {
    left: -100%;
  }
}




.mobile-nav-overly i {
  position: absolute;
  font-size: 36px;
  color: #fff;
  top: 20px;
  left: 20px;
  width: 30px;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: #F2F2F2;
  text-align: center;
  padding: 0 0 1.5rem 0;
}

#footer .cs-center a {
  flex-grow: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 1.5rem;
  width: 100%;
  max-width: 210px;
  gap: 0.45rem;
}

#footer .cs-center a .icon {
  flex-grow: 0;
  width: 1.5rem;
  height: 1.5rem;
}

#footer .cs-center a .arrow {
  flex-grow: 0;
  width: 0.9rem;
  height: 0.9rem;
}

#footer .cs-center a span {
  word-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}

#footer .container {
  margin: 0 auto;
  max-width: var(--max-width);
}

#footer .menu {
  background: #fff;
}

#footer .menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;

}

#footer .menu a {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  padding: 0.2rem 0.8rem;
  word-break: keep-all;
  white-space: nowrap;
  font-weight: 400;
  text-align: center;
}

#footer .menu li.vt span {
  display: inline-block;
  border-right: 1px solid #898989;
  height: 0.8rem;
  margin: 0 0.2rem;
}

#footer .menu .employ {
  line-height: 0;
  padding: 0.2rem 1rem;
  border: 1px solid #dfdfdf;
  border-radius: 0.4rem;
}

#footer .menu .employ img {
  max-height: 1.3rem;
}

#footer .copyright {
  padding: 0 0 0 0;
  font-size: 0.9rem;
  vertical-align: middle;
  line-height: 1.4rem;
  overflow: hidden;
}

#footer .copyright1 {
  border-bottom: 1px solid #dfdfdf;
}

#footer .copyright1 .logo {
  max-height: 3rem;
}

#footer .copyright1 a {
  display: flex;
  justify-content: space-around;
  align-items: center;
  grid-gap: 1rem;
}

#footer .copyright1 a .icon {
  flex-grow: 0;
  width: 1.5rem;
  height: 1.5rem;
}

#footer .copyright1 a .arrow {
  flex-grow: 0;
  width: 0.9rem;
  height: 0.9rem;
}

#footer .company {
  font-size: 0.925rem;
  vertical-align: middle;
}

#footer .company>span {
  display: inline-block;
  word-break: break-all;
  white-space: normal;
  word-wrap: break-word;
  vertical-align: middle;
  color: #000;
}

#footer span.vt {
  border-right: 1px solid #898989;
  height: 0.8rem;
  margin: 0 0.5rem;
}


#footer .copyright .logo img {
  /*display:none;  */
}



@media screen and (max-width:576px) {

  #footer .copyright {
    font-size: 0.7rem;
  }

  #footer .copyright1 {
    border-bottom: none;
  }

  #footer .copyright1 span.logo span {
    font-size: 0.9rem;
  }

  #footer .copyright1 span.logo img {
    max-height: 2rem;
  }

  #footer .copyright2 {
    letter-spacing: -0.05em;
    line-height: 1rem;
  }

  #footer .cs-center .container>div:nth-child(2) {
    width: 100%;
  }

  #footer .cs-center a {
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    border-radius: 0.5rem;
    gap: 0.45rem;
    padding: 0.8rem 0.5rem;
    width: 33%;
    max-width: 120px;
  }

  #footer .cs-center a span {
    display: block;
    font-size: 1rem;
  }

  #footer .cs-center a .arrow {
    display: none !important;
  }

  #footer .menu .container {
    justify-content: center;
  }


  #footer .menu {
    position: relative;
    padding: 0;
    overflow: hidden;
    margin: 0px;
    background: #fff;
  }

  #footer .menu ul {
    justify-content: flex-end;
  }

  #footer .menu li {
    width: calc(50%);
    border-left: 1px solid #adadad;
    border-bottom: 1px solid #adadad;
  }

  #footer .menu li:first-child,
  #footer .menu li:nth-child(3) {
    border-top: 1px solid #adadad;
  }

  #footer .menu li.vt {
    display: none;
  }

  #footer .menu li:nth-child(3),
  #footer .menu li:nth-child(7),
  #footer .menu li:nth-child(11) {
    border-right: 1px solid #adadad;
  }

  .menu li:last-child {
    width: calc(50%) !important;
    border-right: 1px solid #adadad;
  }

  #footer .menu li a {
    display: inline-block;
    width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
  }

  #footer .menu .employ {
    line-height: 0;
    padding: 0.3rem 0;
    border: none;
    border-radius: none;
  }

  #footer .menu .employ img {
    height: 1.8rem;
    max-height: 1.8rem;
  }

  #footer span.vt {
    border-right: 1px solid #898989;
    height: 0.8rem;
    margin: 0 0.3rem;
  }


}



/*--------------------------------------------------------------
# Footer - line
--------------------------------------------------------------*/
#footer.line-footer {
  background: #fff;
  padding: 20px 0 20px 0;
  font-size: 8px;
  font-weight: 600;
  color: #000;
}




/*--------------------------------------------------------------
# 공통
--------------------------------------------------------------*/
.bodycont-900 {
  position: relative;
  width: 900px;
  margin: 0 auto;
}

.bodycont-1280 {
  position: relative;
  width: 1280px;
  margin: 0 auto;
}

.bodycont-1360 {
  position: relative;
  width: 1360px;
  margin: 0 auto;
}

.bodycont-1440 {
  position: relative;
  width: 1440px;
  margin: 0 auto;
}

.bodycont-1690 {
  position: relative;
  width: 1690px;
  margin: 0 auto;
}

.bodycont-1920 {
  position: relative;
  width: 1920px;
  margin: 0 auto;
}

.sub-tit {
  display: block;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  padding: 0.5rem;
  text-align: center;
}

.sub-tit span {
  display: inline-block;
  position: relative;
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 auto;
}

.sub-tit .info {
  font-size: 1.1rem;
  font-weight: 500;
  color: #898989;
}

.sub-tit .info-block {
  display: block;
  font-size: 1.1rem;
  font-weight: 500;
  color: #898989;
}

.sub-tit .more {
  font-size: 1.6rem;
  font-weight: 600;
  color: #E39D19;
  margin-bottom: 40px;
  float: right;
}

.sub-tit2 {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}

.sub-tit3 {
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 0.85rem;
}

.sub-tit4 {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.sub-tit5 {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.profile-imgs {
  display: inline-block;
  position: relative;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  vertical-align: middle;
}

.profile-imgs img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
}

.profile-imgs.profile-xs {
  width: 1.5rem;
  height: 1.5rem;
}

.profile-imgs.profile-sm {
  width: 2rem;
  height: 2rem;
}

.profile-imgs.profile-lg {
  width: 4rem;
  height: 4rem;
}

.urlsend-btn {
  font-size: 0.9rem;
  width: 3.5rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
}

@media screen and (max-width:1199px) {
  .sub-tit2 {
    margin-bottom: 30px;
  }
}

@media screen and (max-width:1024px) {
  .sub-tit2 {
    margin-bottom: 20px;
  }
}

@media screen and (max-width:768px) {
  .sub-tit2 {
    margin-bottom: 10px;
  }
}


@media (max-width: 578px) {
  .urlsend-btn {
    position: fixed;
    right: 15px;
    bottom: 5rem;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    line-height: 40px;
    z-index: 1;
    text-align: center;
    font-size: 18px;
  }

  .urlsend-btn span {
    display: none;
  }
}

/*--------------------------------------------------------------
# INDEX
--------------------------------------------------------------*/
section#section1 {
  position: relative;
  padding: 0;
  overflow: hidden;
  margin: 0px;
  background: url('/image/bg.png') 50% 50% no-repeat;
  background-size: cover;
  color: #fff;
}

section#section1>div {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  overflow: hidden;
}


section#section1 .sns {
  width: 26%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

section#section1 .sns>* {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 4.5rem;
  text-align: center;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 600;
  border-radius: 10px;
}

section#section1 .sns>*>span {
  flex-grow: 1;
  text-align: left;
}

section#section1 .sns .kakao {
  margin-bottom: 10px;
  background: #ffe600;
  padding: 0 1rem;
  line-height: 70px;
  color: #392020;
  text-align: left;

}

section#section1 .sns .kakao .icon,
section#section1 .sns .naver .icon {
  width: 30px;
  margin-right: 10px;
}

section#section1 .sns .kakao .arrow,
section#section1 .sns .naver .arrow {
  width: 0.9rem;
  height: 0.9rem;
}

section#section1 .sns .naver {
  background: #39b54a;
  padding: 0 1rem;
  line-height: 70px;
  text-align: left;
}

section#section1 .regibtn1 {
  position: relative;
  display: inline-block;
  width: 35%;
  min-height: 10rem;
  padding: 2rem;
  color: #fff;
  background: #5476ef;
  border-radius: 1rem;
}

section#section1 .regibtn1>div:not(.bgs) {
  position: relative;
  z-index: 1;
}

section#section1 .regibtn1 .bgs {
  position: absolute;
  bottom: 0;
  right: 30px;
  width: 40%;
  height: 80%;
  background: url('/image/character5.png') 100% 100% no-repeat;
  background-size: contain;
  z-index: 0;
}

section#section1 .regibtn2 {
  position: relative;
  display: inline-block;
  width: 35%;
  min-height: 10rem;
  padding: 2rem;
  color: #fff;
  background: #fff;
  border-radius: 1rem;
}

section#section1 .regibtn2>div:not(.bgs) {
  position: relative;
  z-index: 1;
}

section#section1 .regibtn2 .bgs {
  position: absolute;
  bottom: 0;
  right: 30px;
  width: 50%;
  height: 80%;
  background: url('/image/character9.png') 100% 100% no-repeat;
  background-size: contain;
  z-index: 0;
}




section#section1 .boxes-l .tit {
  font-size: 4.5rem;
}

section#section1 .boxes-r {
  position: relative;
  padding-bottom: 3rem;
}

section#section1 .boxes .boxes-r .btn-tel {
  display: flex;
  max-width: 230px;
  justify-content: space-around;
  align-items: center;
  border: 3px solid #fff;
  border-radius: 1.5rem;
  color: #fff;
  font-size: 1.3rem;
}

section#section1 .boxes .boxes-r .btn-tel .arrow {
  width: 1rem;
  height: 1rem;
}

section#section1 .boxes .boxes-r .bgs {
  position: absolute;
  top: -20px;
  right: 1rem;
  width: 55%;
  height: calc(100% + 20px);
  background: url('/image/character13.png') 100% 100% no-repeat;
  background-size: contain;
}

section#section1 .btn-counsel>a {
  position: relative;
  border: 3px solid #fff;
  border-radius: 1rem;
  padding: 1.4rem 1.4rem;
}

section#section1 .btn-counsel>a img {
  width: 2.5rem;
  height: 2.5rem;
}

@media (max-width: 576px) {
  section#section1 .boxes-l .tit {
    font-size: 3rem;
  }

  section#section1 .sns>* {
    height: 3rem;
    font-size: 1.2rem;
    font-weight: 600;
  }

  section#section1 .sns .kakao .icon,
  section#section1 .sns .naver .icon {
    width: 25px;
    margin-right: 0.5rem;
  }

  section#section1 .sns .arrow {
    display: none;
  }


  section#section1 .btn-counsel>a {
    position: relative;
    border: 2px solid #fff;
    border-radius: 1rem;
    padding: 1.2rem 1.2rem;
  }

  section#section1 .btn-counsel>a img {
    width: 2rem;
    height: 2rem;
  }

}

@media (min-width: 577px) {}

@media (max-width: 767px) {

  section#section1 .boxes-l {
    position: relative;
  }

  section#section1 .boxes-l .char {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 220px;
  }

  section#section1 .boxes-l .char .bg {
    position: relative;
    width: 100%;
    height: 180px;
    background: url('/image/character7.png') 90% 100% no-repeat;
    background-size: contain;
    z-index: 1;
  }

  section#section1 .boxes-l .char .foot {
    position: relative;
    width: 100%;
    height: 40px;
    margin: -10px 0 0 0;
    background: #efefef;
    z-index: 0;
  }


  section#section1 .regibtn1 {
    width: 46%;
    min-height: 5rem;
  }

  section#section1 .regibtn2 {
    width: 46%;
    min-height: 5rem;
  }

  section#section1 .sns {
    display: flex;
    justify-content: center;
    flex-direction: row;
    width: 100%;
  }

  section#section1 .sns .kakao {
    width: 46%;
    line-height: 55px;
    margin-bottom: 0px;
    height: 55px;
    text-align: center;
  }

  section#section1 .sns .naver {
    width: 46%;
    line-height: 55px;
    height: 55px;
    text-align: center;
  }
}

@media (min-width: 768px) {}

@media (min-width: 992px) {}

@media (min-width: 1200px) {}



section#section2 {
  position: relative;
  padding: 0;
  margin: 0px;
  background: #ebf4ff;

}

section#section2>div {
  max-width: var(--max-width);
  margin: 0px auto;

}

section#section2 .btn-logo img {
  height: 2rem;
}

section#section2 .box1,
section#section2 .box2,
section#section2 .box3 {
  text-align: center;
}

section#section2 .box1 img,
section#section2 .box2 img,
section#section2 .box3 img {
  height: 6rem;
}

section#section2 .box1>div {
  background: #d4ddfb;
}

section#section2 .box1 .tit {
  color: #414eaf;
}

section#section2 .box2>div {
  background: #d1e4fb;
}

section#section2 .box2 .tit {
  color: #2172cc;
}

section#section2 .box3>div {
  background: #c1e4f4;
}

section#section2 .box3 .tit {
  color: #0780aa;
}

section#section2 .svc-lists {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  height: 5rem;
  z-index: 1050;
}

section#section2 .svc-list {
  display: flex;
  position: absolute;
  width: 100%;
  top: -3.2rem;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
  margin: 0 auto;
  z-index: 5;
}

section#section2 .svc-list>div {
  display: inline-block;
  width: 20%;
  border-radius: 1.5rem 1.5rem 0 0;
  overflow: hidden;
  box-shadow: 8px 0px 11px -4px rgba(67, 67, 67, 0.5);
}

section#section2 .svc-list>div:first-child {
  box-shadow: 0px 0px 11px -3px rgba(67, 67, 67, 0.5);
}

section#section2 .svc-list .tit {
  position: relative;
  font-size: 1.4rem;
  line-height: 3.2rem;
  color: #fff;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}

section#section2 .svc-list ul {
  display: none;
  height: 0;
  overflow: hidden;
  padding: 1rem 0.5rem;
  margin: 0;
  list-style: none;
  background: #fff;
  animation-duration: .7s;
  animation-name: slideout;
}

section#section2 .svc-list>div:hover,
section#section2 .svc-list>div.active {
  border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
  box-shadow: 0px 0px 11px -3px rgba(67, 67, 67, 0.5);
}

section#section2 .svc-list>div:hover>ul,
section#section2 .svc-list>div.active>ul {
  display: block;
  height: auto;
}

section#section2 .svc-list ul li {
  font-size: 1.2rem;
  line-height: 1.8rem;
  font-weight: 500;
  padding: 0 1rem;
}

@keyframes slideout {
  from {
    opacity: 0;
  }

  to {
    opacity: 100;
  }
}

section#section2 .svc-list>div:nth-child(1) .tit {
  background: #2390cc;
}

section#section2 .svc-list>div:nth-child(2) .tit {
  background: #4c68e3;
}

section#section2 .svc-list>div:nth-child(3) .tit {
  background: #4892f1;
}

section#section2 .svc-list>div:nth-child(4) .tit {
  background: #3261bb;
}

section#section2 .svc-list>div:nth-child(5) .tit {
  background: #0995d2;
}






section#section3 {
  position: relative;
  padding: 0;
  overflow: hidden;
  margin: 0px;
  background: url('/image/bg2.png') #ebf4ff 50% 50% no-repeat;
  background-size: cover;
}

section#section3>div {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
}

section#section3 .boxes {}

section#section3 .boxes .boxes-l {
  background: url('/image/character2.png') #f6f9ff 90% 100% no-repeat;
  background-size: contain;
}

section#section3 .boxes .boxes-r {
  background: url('/image/character3.png') #c1d4fc 90% 100% no-repeat;
  background-size: contain;
}


section#section3 .arrow-bg {
  position: relative;
  padding-left: 1.5rem;
}

section#section3 .arrow-bg span {
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url('/image/icon_arrow4.png') 50% 50% no-repeat;
  background-size: 14px;
}

section#section3 .btn-tel {
  display: flex;
  max-width: 200px;
  justify-content: space-around;
  align-items: center;
  border: 2px solid #192d79;
  border-radius: 1.4rem;
  color: #192d79;
  font-size: 1.2rem;
}

section#section3 .btn-tel .arrow {
  width: 1rem;
  height: 1rem;
}


section#section4 {
  width: 100%;
  position: relative;
  padding: 0;
  overflow: hidden;
  margin: 0px;
  background: url('/image/bg3.png') 50% 50% no-repeat;
  background-size: cover;
}

section#section4>div {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
}

section#section4 .search-form input {
  border-radius: 10px 0 0 10px;
}

section#section4 .search-form button[type=submit] {
  background: url('/image/icon_search.png') #4c68e3 85% 50% no-repeat;
  background-size: 20px;
  border-radius: 0 10px 10px 0;
}

@media (max-width: 576px) {
  section#section4 .search-form {
    max-width: 90%;
  }
}

@media (min-width: 577px) {
  section#section4 .search-form {
    max-width: 70%;
  }
}

@media (max-width: 767px) {
  section#section4 {
    background: none;
  }

  section#section4 .boxes-l {
    background: url('/image/bg3_l.png') 0% 50% no-repeat;
    background-size: cover;
  }

  section#section4 .boxes-r {
    background: #112360;
  }
}

@media (min-width: 768px) {
  section#section4 .search-form {
    max-width: 400px;
  }
}

@media (min-width: 992px) {}

@media (min-width: 1200px) {}





section#section5 {
  width: 100%;
  position: relative;
  padding: 0;
  overflow: hidden;
  margin: 0px;
  background: #f1f5f8;
}

section#section5>div {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
}

section#section5 .boxes {}

section#section5 .boxes .boxes-l {
  text-align: center;
}

section#section5 .boxes .boxes-l .figure1 {
  width: 100%;
  margin: 0 auto;
}

section#section5 .boxes .boxes-r {
  position: relative;
  background: url('/image/talbox.png') 100% 10% no-repeat;
  background-size: contain;
}

section#section5 .boxes .boxes-r .cont {
  position: absolute;
  top: 50%;
  right: 6%;
  width: 70%;
  transform: translateY(-50%);
}


@media (max-width: 576px) {}

@media (max-width: 767px) {

  section#section5 .boxes .boxes-l .figure1 {
    max-width: 60%;
  }

  section#section5 .boxes .boxes-l .btn {
    max-width: 99%;
  }

  section#section5 .boxes .boxes-r {
    background: none;
  }

  section#section5 .boxes .boxes-r .cont {
    position: relative;
    margin: 0 auto;
    padding: 2rem;
    border-radius: 15px;
    top: 0;
    right: 0;
    width: 99%;
    transform: none;
    border: 1px solid #dfdfdf;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  }

}

@media (min-width: 768px) {}

@media (min-width: 992px) {}

@media (min-width: 1200px) {}



section#section6 {
  border-top: 1px solid #D6D6D6;
}

section#section6>div {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  overflow: hidden;
}

section#section6 ul {
  width: 100%;
  height: auto;
}

section#section6 li {
  display: inline-block;
  width: 13%;
}

section#section6 li img {
  width: 100%;
}

@media (max-width: 767px) {
  section#section6 li {
    width: 24%;
  }
}

@media (max-width: 576px) {
  section#section6 li {
    width: 33%;
  }
}

section#section7 {
  background: #f1f5f8;
  border-top: 1px solid #D6D6D6;
}

section#section7>div {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  overflow: hidden;
}

section#section7 ul {
  width: 100%;
  height: auto;
}

section#section7 li {
  display: inline-block;
  width: 32%;
}

section#section7 li img {
  width: 100%;
}

@media (max-width: 767px) {
  section#section7 li {
    width: 48%;
  }
}




section#section10 {
  position: relative;
  padding: 0;
  overflow: hidden;
  margin: 0px;
  background: url('/image/bg.png') 50% 50% no-repeat;
  background-size: cover;
  color: #fff;
}

section#section10>div {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
}



section#section10 .boxes-l .tit {
  font-size: 4.5rem;
}

section#section10 .boxes-r {
  position: relative;
  background: #ebf0ff;
}

section#section10 .btn-counsel>a {
  position: relative;
  border: 3px solid #fff;
  border-radius: 1.6rem;
  padding: 2.1rem 2.1rem;
}

section#section10 .btn-counsel>a img {
  width: 3.5rem;
  height: 3.5rem;
}

@media (max-width: 576px) {
  section#section10 .boxes-l .tit {
    font-size: 2.5rem;
  }
}

@media (max-width: 767px) {

  section#section10 .boxes-l {
    position: relative;
  }

  section#section10 .boxes-l .tit {
    font-size: 3.5rem;
  }

  section#section10 .regibtn1,
  section#section10 .regibtn2,
  section#section10 .regibtn3,
  section#section10 .regibtn4 {
    width: 45%;
  }
}

@media (min-width: 768px) {}

@media (min-width: 992px) {}

@media (min-width: 1200px) {}


section#section11 {
  position: relative;
  padding: 0;
  overflow: hidden;
  margin: 0px;
  background: url('/image/bg2.png') #ebf4ff 50% 100% no-repeat;
  background-size: 1550px;
}

section#section11>div {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

section#section11 .regibtn1,
section#section11 .regibtn2,
section#section11 .regibtn3,
section#section11 .regibtn4 {
  position: relative;
  width: calc(50% - 1.5rem / 2);
  display: inline-block;
  padding: 1rem 1rem 6rem 1rem;
  border-radius: 1rem;
  box-shadow: 0 .5rem 1rem rgba(70, 70, 70, 0.2) !important;
}

section#section11 .regibtn1 .bgs,
section#section11 .regibtn2 .bgs,
section#section11 .regibtn3 .bgs,
section#section11 .regibtn4 .bgs {
  position: absolute;
  bottom: 0;
  right: 30px;
  width: 40%;
  height: 90%;
  z-index: 0;
}

section#section11 .regibtn1 {
  color: #fff;
  background: #4562bf;
}

section#section11 .regibtn1>div:not(.bgs) {
  position: relative;
  z-index: 1;
}

section#section11 .regibtn1 .bgs {
  background: url('/image/character8.png') 100% 100% no-repeat;
  background-size: contain;
}


section#section11 .regibtn2 {
  color: #4562bf;
  background: #d9e4ff;
}

section#section11 .regibtn2>div:not(.bgs) {
  position: relative;
  z-index: 1;
}

section#section11 .regibtn2 .bgs {
  background: url('/image/character9.png') 100% 100% no-repeat;
  background-size: contain;
}


section#section11 .regibtn3 {
  color: #0780aa;
  background: #d4ebf8;
}

section#section11 .regibtn3>div:not(.bgs) {
  position: relative;
  z-index: 1;
}

section#section11 .regibtn3 .bgs {
  background: url('/image/character10.png') 100% 100% no-repeat;
  background-size: contain;
}


section#section11 .regibtn4 {
  color: #fff;
  background: #5476ef;
}

section#section11 .regibtn4>div:not(.bgs) {
  position: relative;
  z-index: 1;
}

section#section11 .regibtn4 .bgs {
  background: url('/image/character11.png') 100% 100% no-repeat;
  background-size: contain;
}


@media (max-width: 576px) {

  section#section11 {
    background: url('/image/bg2.m.png') #ebf4ff 50% 100% no-repeat;
    background-size: cover;
  }

  section#section11 .regibtn1,
  section#section11 .regibtn2,
  section#section11 .regibtn3,
  section#section11 .regibtn4 {
    position: relative;
    width: 100%;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 .5rem 1rem rgba(70, 70, 70, 0.2) !important;
  }
}

/*--------------------------------------------------------------
#검색 페이지
--------------------------------------------------------------*/
.total-search {
  margin-bottom: 100px;
  min-height: 500px;
}

.total-search .inputs {
  width: 700px;
  height: 76px;
  border: 3px solid #000;
  margin: 0 auto;
  border-radius: 4px;
}

.total-search button {
  float: right;
  border: none;
  height: 70px;
  width: 80px;
  border-radius: 4px;
}

.total-search button img {
  height: 45px;
}

.total-search input {
  float: left;
  border: none;
  height: 70px;
  line-height: 64px;
  font-size: 30px;
  width: calc(100% - 80px);
  border-right: 2px solid #000;
  background-color: transparent;
  outline: none;
  border-radius: 4px 0 0 8px;
  text-align: center;
}

.total-search .result-box {
  text-align: center;
  font-size: 20px;
  margin-top: 30px;
  background: #f7f7f7;
  border-radius: 10px;
  height: 150px;
  line-height: 150px;
}

.total-search .search_board_result {
  position: relative
}

.total-search ul.sch_res_list {
  margin: 0 0 20px 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #ececec
}

.total-search ul.sch_res_list li {
  border-bottom: 1px solid #ececec;
  background: #fff;
  position: relative
}

.total-search ul.sch_res_list .sch_tit {
  display: block;
  padding: 20px 0 10px
}

.total-search ul.sch_res_list .pop_a {
  display: inline-block;
  background: #e8eeef;
  color: #6f777f;
  border-radius: 50%;
  text-align: center;
  width: 26px;
  height: 26px;
  line-height: 26px
}

.sch_res_title {
  display: inline-block;
  margin: 0 0 5px;
  font-size: 1.2em
}

.total-search ul.sch_res_list p {
  padding-bottom: 10px;
  color: #666;
  line-height: 1.5em
}

.total-search ul.sch_res_list .sch_info {
  padding: 10px 0;
  color: #777
}

.total-search ul.sch_res_list .sch_info:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: ""
}

.total-search ul.sch_res_list .profile_img img {
  width: 30px;
  height: 30px;
  border-radius: 50%
}

.total-search ul.sch_res_list .sch_datetime {
  margin-left: 5px
}

.total-search .sch_more {
  float: right;
  top: 5px;
  text-align: right;
  font-weight: normal;
  color: #E39D18
}

.total-search .sch_word {
  color: #ff0000;
}

.total-search .kitem-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  background: #F8F8F8 0% 0% no-repeat;
  border-radius: 5px;
  padding: 20px;
}

.total-search .kitem-list li {
  width: 160px;
  font-size: 16px;
  margin-bottom: 0px;
}

.total-search .kitem-list li:not(:nth-child(8n)) {
  margin-right: 16px;
}

.total-search .kitem-list li:nth-child(8n) {
  margin-right: 0;
}

.total-search .kitem-list li div {
  width: 100%;
  height: 150px;
  margin-bottom: 10px;
  overflow: hidden;
}



/*--------------------------------------------------------------
# 회원 가입
--------------------------------------------------------------*/

.join-i-cont .cont1 {
  margin-top: 4rem;
}

.join-i-cont .cont1 .title-1 {
  font-size: 4rem;
  line-height: 150%;
  font-weight: 600;
  margin-bottom: 4rem;
}

.join-i-cont .cont1 .title-2 {
  font-size: 4rem;
  line-height: 150%;
  font-weight: 600;
  margin-bottom: 4rem;
}

.join-i-cont .cont1 .title-3 {
  font-size: 1.2rem;
  line-height: 150%;
  margin-bottom: 4rem;
  text-align: right;
}

.join-i-cont .go-btn {
  display: inline-block;
  height: 80px;
  line-height: 80px;
  width: 100%;
  font-size: 1.5rem;
  border: 2px solid #000;
  text-align: center;
}

.join-i-cont .go-btn .half-arrow {
  display: inline-block;
  position: relative;
  width: 41px;
  height: 20px;
  border-bottom: 2px solid #000;
}

.join-i-cont .go-btn .half-arrow:after {
  content: '';
  position: absolute;
  top: 9px;
  right: 2px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-right: 2px solid #000;
  transform: rotate(-45deg);
}




.join-i-cont .cont1 .pic {}



.join-i-cont .cont2 {
  margin-top: 7rem;
  text-align: center;
}

.join-i-cont .cont2 .title-1 {
  font-size: 2.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 5rem;
}

.join-i-cont .cont2 ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.join-i-cont .cont2 ul li {}

.join-i-cont .cont2 ul li .tit1 {
  font-size: 1.4rem;
  font-weight: 400;
  margin-top: 2rem;
  margin-bottom: 4rem;
}

.join-i-cont .cont2 ul li .pic {
  width: 100%;
  position: relative;
}

.join-i-cont .cont2 ul li .pic img {
  width: 100%;
  max-width: 200px;
}




.join-i-cont .cont3 {
  margin-top: 7rem;
  text-align: center;
}

.join-i-cont .cont3 .title-1 {
  font-size: 2.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 5rem;
}

.join-i-cont .cont3 ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.join-i-cont .cont3 ul li {
  border-radius: 4px;
  padding: 0rem 1rem;
}

.join-i-cont .cont3 ul li>div {
  background: #FAFAFA;
  border-radius: 4px;
  padding: 2rem 3rem;
}

.join-i-cont .cont3 ul li:last-child {
  margin-right: 0px;
}

.join-i-cont .cont3 ul li .tit1 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.join-i-cont .cont3 ul li .tit2 {
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 3rem;
}

.join-i-cont .cont3 ul li .pic {
  width: 100%;
  position: relative;
}

.join-i-cont .cont3 ul li .pic .idx {
  width: 100px;
  height: 100px;
  position: absolute;
  top: -10px;
  right: -30px;
  z-index: 1;

}

.join-i-cont .cont3 ul li .pic img {
  width: 100%;
}

.join-i-cont .cont4 {
  margin-top: 7rem;
  text-align: center;
}

.join-i-cont .cont4 .title-1 {
  font-size: 2.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 5rem;
}




.faq-list {
  display: block;
  width: 100%;
}

.faq-list li {
  width: 100%;
  background: #F8F8F8;
  text-align: left;
}

.faq-list li .question {
  position: relative;
  display: block;
  width: 100%;
  height: 4rem;
  padding: 0 1rem 0 1.5rem;
  line-height: 4rem;
  font-size: 1.5rem;
  text-align: left;
  font-weight: 600;
  background: #F9F9FC 0% 0% no-repeat;
  border: 1px solid #D8D8D8;
  border-radius: 2px;

}

.faq-list li:nth-child(odd) .question {
  background: #F0F1F4 0% 0% no-repeat;
}

.faq-list li .question span.angle-up {
  position: absolute;
  top: 50%;
  right: 1.7rem;
  width: 14px;
  height: 14px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(-135deg);
}

.faq-list li .question span.angle-down {
  position: absolute;
  top: 50%;
  right: 1.7rem;
  width: 14px;
  height: 14px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: translateY(-7px) rotate(45deg);
}

.faq-list .que {
  width: calc(100% - 2rem);
  padding: 1rem;
  margin: 1rem auto;
  background: #FFFFFF 0% 0% no-repeat;
  box-shadow: 0px 0px 2px #00000029;
  border-radius: 10px;
  font-size: 1.2rem;
  font-weight: 800;
}

.faq-list .ans {
  width: 100%;
  padding: 2rem 3rem;
  margin: 0 auto;
  background: #FBF4DE 0% 0% no-repeat;
  font-size: 1.2rem;
  font-weight: 800;
}

/*--------------------------------------------------------------
# 마이페이지
--------------------------------------------------------------*/
/* 마이페이지 */
#smb_my {
  position: relative;
  margin: 1rem 0 2rem;
}

#smb_my:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: ""
}

/* 마이페이지 aside */
#smb_my_ov {
  position: relative;
  float: left;
  margin: 0 10px 0 0;
  width: 240px;
  border: 1px solid #e8e8e8;
  background: #fff;
  margin-right: 20px
}

#smb_my_ov h2 {
  position: absolute;
  font-size: 0;
  line-height: 0;
  overflow: hidden
}

#smb_my_ov .smb_me {
  display: block;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 20px;
  text-align: center;
  font-size: 1.167em
}

#smb_my_ov .smb_me img {
  width: 45px;
  border-radius: 50%
}

#smb_my_ov .smb_me .my_ov_name {
  display: inline-block;
  margin-bottom: 10px;
  line-height: 28px
}

#smb_my_ov .smb_me a {
  display: inline-block;
  font-size: 0.85em;
  height: 28px;
  line-height: 22px;
  border: 1px solid #d5d9dd;
  color: #8a8a8a;
  border-radius: 2px;
  padding: 2px 5px
}

#smb_my_ov .smb_me a.smb_info {
  color: #3a8afd
}

#smb_private:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: ""
}

#smb_private {
  padding: 10px 0;
  border-bottom: 1px solid #e8e8e8;
}

#smb_private li {
  position: relative;
  text-align: left
}

#smb_private a {
  display: block;
  background: #fff;
  color: #465168;
  line-height: 20px;
  padding: 10px 20px 10px 25px
}

#smb_private a strong {
  display: inline-block;
  float: right;
  max-width: 87px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  color: #3a8afd;
  padding: 0 5px;
  border-radius: 15px;
  font-size: 0.92em
}

#smb_private a:hover strong {
  background: #4b8bff
}

#smb_private li a:hover {
  color: #4b8bff
}

#smb_private li a:hover:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: #3a8afd;
  content: ""
}

#smb_private li i {
  width: 25px;
  color: #8c9eb0;
  margin-right: 5px
}

#smb_private li:hover i {
  color: #3a8afd
}

#smb_private .win_point strong {
  background: #37bc9b;
  color: #fff
}

#smb_private .win_memo strong {
  background: #ff8b77;
  color: #fff
}

#smb_private .win_scrap strong {
  background: #8cc152;
  color: #fff
}

#smb_private .win_coupon strong {
  background: #a352c1;
  color: #fff
}

#smb_private .win_alim strong {
  background: #7895EC;
  color: #fff
}

#smb_my_ov h3 {
  font-size: 1.2em;
  padding: 20px 20px 10px;
  border-top: 1px solid #e8e8e8
}

#smb_my_ov .op_area {
  border-top: 0;
  padding: 0 20px;
  line-height: 18px;
  color: #555
}

#smb_my_ov .op_area:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: ""
}

#smb_my_ov .op_area dl {
  border-bottom: 1px dashed #e5e5e5;
  overflow: hidden;
}

#smb_my_ov .op_area dt {
  margin: 5px 0;
  padding-top: 5px;
  font-weight: bold;
  color: #8c9eb0;
  line-height: 20px;
  border-bottom: 0;
}

#smb_my_ov .op_area dd {
  margin: 5px 0;
  padding-bottom: 10px;
  line-height: 20px;
  border-bottom: 0;
}

#smb_my_ov .op_area dl:last-child {
  border-bottom: 0;
}

.withdrawal {
  display: block;
  padding: 10px 20px;
  border-top: 1px solid #e8e8e8;
  color: #c7c7c7
}

/* 마이페이지 list */
#smb_my_list {
  float: right;
  width: calc(100% - 260px);
}

#smb_my_od h2 {
  margin: 0 0 10px;
  font-size: 1.25em
}

#smb_my_od {
  position: relative;
  margin: 0 0 50px
}

.smb_my_od {
  background: #fff
}

.smb_my_od li {
  padding: 15px;
  border-bottom: 1px solid #ececec
}

.smb_my_od li:last-child {
  border-bottom: 0
}

.smb_my_od li:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: ""
}

.smb_my_od li:hover {
  background: #fff6f6
}

.smb_my_od .smb_my_od_li {
  float: left;
  line-height: 18px
}

.smb_my_od .smb_my_od_li1 {
  width: 140px;
  text-align: center
}

.smb_my_od .smb_my_od_li2 {
  width: 75%;
  padding: 0 20px
}

.smb_my_od .smb_my_od_li3 {
  width: 80px;
  float: right;
  text-align: center
}

.smb_my_od .ord_num,
.smb_my_od .ord_name {
  font-size: 1.2em;
  font-weight: bold;
  letter-spacing: -0.5px
}

.smb_my_od .date {
  color: #b5b5b5
}

.smb_my_od .cost {
  color: #3a8afd;
  font-weight: bold
}

.smb_my_od .misu {
  color: #6d6d6d
}

#smb_my_wish {
  position: relative;
  margin-bottom: 30px
}

#smb_my_wish h2 {
  font-size: 1.25em;
  padding: 0 0 20px;
  border-bottom: 1px solid #d9dde2
}

#smb_my_wish li {
  position: relative;
  background: #fff;
  border-bottom: 1px solid #ececec;
  padding: 15px
}

#smb_my_wish li:after {
  display: block;
  visibility: hidden;
  clear: both;
  content: ""
}

#smb_my_wish .smb_my_chk {
  display: inline-block;
  float: left;
  margin-right: 10px;
  color: red
}

#smb_my_wish .smb_my_img {
  float: left;
  margin-right: 20px
}

#smb_my_wish .smb_my_tit {
  margin: 5px 0;
  font-size: 1.167em;
  font-weight: bold
}

#smb_my_wish .smb_my_price {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 30px
}

#smb_my_wish .smb_my_date {
  font-size: 1em;
  color: #777
}

.smb_my_more {
  position: absolute;
  top: 0;
  right: 0
}

.smb_my_more a {
  display: block;
  background: url('../img/more-btn.gif') no-repeat 0 2px;
  padding-left: 20px;
  height: 30px
}

#smb_my_wish li .wish_del {
  position: absolute;
  right: 20px;
  top: 50px;
  font-size: 1.4em;
  color: #b2b2b2
}

#smb_ws_act {
  text-align: center;
  margin: 20px 0 30px
}

#smb_ws_act .btn01 {
  width: 180px;
  height: 50px;
  font-weight: bold;
  font-size: 1.167em;
  border: 1px solid #98a3b3;
  border-radius: 3px
}

#smb_ws_act .btn02 {
  width: 180px;
  height: 50px;
  font-weight: bold;
  font-size: 1.167em;
  border: 1px solid #1c70e9;
  border-radius: 3px;
  background: #3a8afd
}


@media (max-width:1199px) {
  #smb_my_ov {
    display: none;
  }

  #smb_my_list {
    float: none;
    width: 100%;
  }

  #smb_private {
    border-bottom: 0;
  }

  /*
	#smb_my_ov {float:none; width:100% ; overflow: hidden;display: flex; flex-grow:1;flex-wrap:wrap;}
	#smb_my_ov > h3, #smb_my_ov > a  {display:none ;}
	#smb_my_ov .smb_me , #smb_my_ov #smb_private, #smb_my_ov .op_area{float:left;display: inline-block; }
	#smb_my_ov .smb_me {width:20%; border-bottom:none; border-right:1px solid #efefef;}
	#smb_my_ov #smb_private {width:30%; border-right:1px solid #efefef;}
	#smb_my_ov .op_area{width:50%;}
	#smb_my_ov .op_area dl{display:block;width:100%;margin-top:5px;}
	#smb_my_ov .op_area dt{float:left;display:inline-block; width:30%; padding-top: 0px;  padding-bottom: 5px;   line-height:1.4rem;}
	#smb_my_ov .op_area dd{float:right;display:inline-block; width:70%; padding-top: 0px;  padding-bottom: 5px;  line-height:1.4rem; }
	#smb_my_list {float:none; width:100% ;}
	*/
}

@media (max-width:767px) {
  /*
	#smb_my_ov {float:none; width:100% ; overflow: hidden;display: flex; flex-grow:1;}
	#smb_my_ov > h3, #smb_my_ov > a  {display:none ;}
	#smb_my_ov .smb_me {width:50%; border-bottom:none; border-right:1px solid #efefef;}
	#smb_my_ov #smb_private {width:50%; border-right:none}
	#smb_my_ov .op_area{float:none;width:100%;display: block; border-top:1px solid #efefef;}

	*/

}


/*--------------------------------------------------------------
# 회사메인
--------------------------------------------------------------*/
.company-row {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.company-left {
  width: 340px;
}

.company-left .sub-tit3 {
  margin-bottom: 30px;
}

.company-left .user-pic {
  width: 300px;
  height: 174px;
  border: 2px solid #EFEFEF;
  border-radius: 2px;
  margin: 0 auto;
}


.company-right {
  width: 1060px;
  margin-left: 40px;
}

.company-left .company-box {
  width: 100%;
  padding: 30px 20px;
  border: 2px solid #EDEDED;
  border-radius: 10px;

}

.company-right .company-box {
  width: 100%;
  padding: 40px 40px;
  border: 2px solid #EDEDED;
  border-radius: 10px;

}

.company-box .more {
  font-size: 18px;
  color: #E39D19;
}

.company-box .company-que {
  border-radius: 10px;
  background: #EFEFEF;
  padding: 40px;
}

.company-box .company-que .sbj {
  font-size: 18px;
  font-weight: 600;
}

.company-box .company-que .memo {
  font-size: 16px;
  line-height: 24px;
}

.company-box .company-ans {
  border-radius: 10px;
  background: #FBF4DE;
  padding: 40px;
  font-size: 18px;
  overflow: hidden;
}

.company-box .company-ans .h {
  display: inline-block;
  width: 24px;
  float: left;
}

.company-box .company-ans .c {
  width: calc(100% - 24px);
  float: right;
}

/*--------------------------------------------------------------
# 갤러리 타일
--------------------------------------------------------------*/
/* 메인 캠페인 목록 */
.gal-list-1 {
  display: flex;
  grid-gap: 1rem;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  padding: 1rem 0;
  margin: 0;
  overflow: hidden;
}

.gal-list-1 li {
  position: relative;
  width: calc(14.2% - 6rem / 7);
  border-radius: 5px;
  padding: 0.5rem;
  margin: 0;
  border: 1px solid #efefef;
  box-shadow: 1px 1px 5px 1px rgba(145, 145, 145, 0.2);
}

.gal-list-1.gal-list-1000 li {
  width: calc(25% - 3rem / 4);
}

.gal-list-1 li .head {
  width: 100%;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 44px;
}

.gal-list-1 li .pic {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-bottom: 12px;
}

.gal-list-1 li.closed .pic {
  filter: grayscale(100%);
}


.gal-list-1 li .pic .badges {
  position: absolute;
  bottom: 0.2rem;
  left: 0.2rem;
  width: 100%;
}

.gal-list-1 li .info {
  width: 100%;
}

.gal-list-1 li .info>div {
  width: 100%;
  overflow: hidden;
  word-break: keep-all;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.6rem;
}

.gal-list-1 li .info img {
  margin-right: 10px;
  vertical-align: middle;
}

.gal-list-1 li .stars {
  float: left;
  font-size: 12px;
  font-family: Roboto;
  text-align: left;
}

.gal-list-1 li .hits {
  float: right;
  font-size: 12px;
  font-family: Roboto;
  text-align: right;
}

.gal-list-1 li .sbj {
  font-size: 1rem;
  text-align: left;
  font-weight: 500;
  line-height: 1.1rem;
  height: 2.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
}


@media (max-width: 1600px) {
  .gal-list-1 li {
    width: calc(16.6% - 5rem / 6);
  }

  .gal-list-1.gal-list-1000 li {
    width: calc(25% - 3rem / 4);
  }
}

@media (max-width: 1400px) {
  .gal-list-1 li {
    width: calc(20% - 4rem / 5);
  }

  .gal-list-1.gal-list-1000 li {
    width: calc(25% - 3rem / 4);
  }
}

@media (max-width: 1199px) {
  .gal-list-1 li {
    width: calc(25% - 3rem / 4);
  }

  .gal-list-1.gal-list-1000 li {
    width: calc(25% - 3rem / 4);
  }
}

@media (max-width: 768px) {
  .gal-list-1 li {
    width: calc(33.3% - 2rem / 3);
  }

  .gal-list-1.gal-list-1000 li {
    width: calc(33.3% - 2rem / 3);
  }
}

@media (max-width: 576px) {
  .gal-list-1 li {
    width: calc(50% - 1rem / 2);
  }

  .gal-list-1.gal-list-1000 li {
    width: calc(50% - 1rem / 2);
  }

}



/* 메인 갤러리 목록 */
.main-swiper {}

.gal-list-swiper {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  width: 100%;
  padding: 1rem 0;
  margin: 0;
}

.gal-list-swiper li {
  border-radius: 5px;
  padding: 0.5rem;
  margin: 0 0 0px 0;
  border: 1px solid #efefef;
  box-shadow: 1px 1px 5px 1px rgba(145, 145, 145, 0.2);
}

.gal-list-swiper li a {
  display: inline-block;
  width: 100%;

}

.gal-list-swiper li .head {
  width: 100%;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 44px;
}

.gal-list-swiper li .pic {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-bottom: 12px;
  transition: all 0.5s ease-out;
}

.gal-list-swiper li.closed .pic {
  filter: grayscale(100%);
}

.gal-list-swiper li:hover .pic {
  transform: scale(1.02);
}

.gal-list-swiper li .pic .badges {
  position: absolute;
  bottom: 0.2rem;
  left: 0.2rem;
  width: 100%;
}

.gal-list-swiper li .info {
  width: 100%;
}

.gal-list-swiper li .info>div {
  width: 100%;
  overflow: hidden;
  word-break: keep-all;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.6rem;
}

.gal-list-swiper li .stars {
  float: left;
  font-size: 12px;
  font-family: Roboto;
  text-align: left;
}

.gal-list-swiper li .hits {
  float: right;
  font-size: 12px;
  font-family: Roboto;
  text-align: right;
}

.gal-list-swiper li .sbj {
  font-size: 1rem;
  text-align: left;
  font-weight: 500;
  line-height: 1.1rem;
  height: 2.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gal-list-swiper li.empty_li {
  width: 100% !important;
  display: block;
  padding: 5rem 0;
  text-align: center;
  box-shadow: none;
}

.gallery-box .swiper-button-next,
.gallery-box .swiper-button-prev {
  color: #FFFFFF;

}

.board-box .swiper-button-next,
.board-box .swiper-button-prev {
  color: #FFFFFF;

}



/*--------------------------------------------------------------
# 회원전환 신청
--------------------------------------------------------------*/
#member_change_index {
  position: relative;
  margin-top: 3rem;
  min-height: 500px;

}

#member_change_index .boxes {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

#member_change_index .boxes .boxes-l {
  background: url(/image/character8.png) #f6f9ff 100% 100% no-repeat;
  background-size: auto 70%;
}

#member_change_index .boxes .boxes-r {
  background: url(/image/character3.png) #c1d4fc 90% 100% no-repeat;
  background-size: auto 70%;
}

@media (max-width: 768px) {
  #member_change_index .boxes {
    position: relative;
    top: 0;
    right: auto;
    left: auto;
    transform: translate(0, 0);
    width: auto;
  }
}

/*은행 입력 */
ul.number-list {
  counter-reset: item;
  list-style-type: none;
  /* 기본 목록 스타일 제거 */
  margin: 0;
  padding: 0;
}

ul.number-list li {
  counter-increment: item;
  /* "item" 카운터 증가 */
  margin: 0.2rem 0;
  padding: 0.2rem 0;
  border-bottom: 1px solid #ddd;
}

ul.number-list li::before {
  content: counter(item) ". ";
  /* "item" 카운터 값 표시 */
}

/*--------------------------------------------------------------
# etc
--------------------------------------------------------------*/
.btn-lg {
  border-radius: 5px;
}

.btn-secondary {
  background: #A2A2A2;
}

.btn-yellow {
  background: #f9e001;
  color: #392020 !important;
}

.btn-yellow:hover,
.btn-yellow:active {
  background: #F1E78B;
  color: #392020 !important;
}



.btn-green {
  background: #39b54a;
  color: #fff !important;
}

.btn-green:hover,
.btn-green:active {
  background: #62CB71 !important;
  color: #fff !important;
}

.btn-grey {
  background: #A2A2A2;
  color: #fff !important;
}

.btn-navy {
  background: #192d79;
  color: #fff;
}

.btn-navy:hover,
.btn-navy:active {
  background: #30407E !important;
  color: #fff !important;
}

.btn-blue {
  background: #254587;
  color: #fff;
}

.btn-blue:hover {
  background: #3F598D;
  color: #fff;
}

.btn-mblue {
  background: #4c68e3;
  color: #fff;
}

.btn-mblue:hover {
  background: #798CDF;
  color: #fff;
}


.btn-lblue {
  background: #4858d2;
  color: #fff;
}

.btn-lblue:hover {
  background: #6470CF;
}


input[type=text].form-control,
input[type=password].form-control,
textarea.form-control,
.input-group .input-group-text {
  /*border:1px solid #707070;*/
  border-radius: 3px;
}

.bg-navy {
  background: #192d79;
}

.bg-blue {
  background: #254587;
}

.bg-rblue {
  background: #3261bb;
}

.bg-mblue {
  background: #4c68e3;
}

.bg-lblue {
  background: #4858d2;
}

.bg-sky {
  background: #4892f1;
}

.bg-lsky {
  background: #e6f2ff;
}

.text-navy {
  color: #192d79;
}

.text-blue {
  color: #254587;
}

.text-lblue {
  color: #4858d2;
}

.text-mblue {
  color: #4c68e3;
}

.border-navy-1 {
  border: 1px solid #192d79;
}

.border-navy-2 {
  border: 2px solid #192d79;
}

.border-navy-3 {
  border: 3px solid #192d79;
}

.border-navy {
  border: 3px solid #192d79;
}


.fancyselect {
  height: 36px;
  line-height: 34px;
  padding-right: 20px;
  text-align: center;
  font-family: inherit;
  border: none;
  background: url('/image/select_down_arrow.svg') #EFEFEF no-repeat 95% 50%;
  border-radius: 0px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

}

.fancyselect:focus {
  width: 200px;
  border: 1px solid #000000;
  outline: none;
  font-family: inherit;
  background: url('/image/select_up_arrow.svg') #EFEFEF no-repeat 95% 50%;
}

.fancyselect option {
  border: none;
  outline: none;
  background: #fff;
  box-shadow: none;
  border-radius: 0px;
  line-height: 35px;
  height: 25px;
}


ul.tabs {
  display: inline-block;
  width: auto;
  margin: 0 auto 2rem auto;
  padding: 0;
  position: relative;
  list-style: none;
  overflow: hidden;
  border-bottom: 1px solid #dfdfdf;
}

ul.tabs li {
  float: left;
  margin: 0;
  overflow: hidden;
  position: relative;
  background: #fff;
  padding: 0px 1rem;
}

ul.tabs li a {
  width: 100%;
  text-decoration: none;
  display: inline-block;
  font-size: 1.2rem;
  line-height: 38px;
  padding: 0px 1rem;
  outline: none;
  text-align: center;
  margin: 0;
  border-bottom: 2px solid transparent;
  word-break: keep-all;
  word-wrap: normal;

}

ul.tabs li a:hover {
  font-weight: 600;
  border-bottom: 2px solid #E39D19;
}

ul.tabs li.active a {
  font-weight: 800;
  border-bottom: 2px solid #E39D19;
}

ul.tabs.div-3 li {
  width: 33.3%;
}


ul.sub-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

ul.sub-tab a {
  display: inline-block;
  width: 100%;
  padding: 0px 2rem;
  line-height: 2.5rem;
  background: #eaebf2;
  border: 1px #d3d5e1 solid;
  color: #575a70;
  transition: all .3s ease-out;
  word-break: keep-all;
  white-space: nowrap;
  word-wrap: normal;
}

ul.sub-tab a:hover {
  background: #B1BADA;
  color: #000 !important;
}

ul.sub-tab li.current a {
  font-weight: 700;
  background: #192d79;
  border-color: #192d79;
  color: #fff !important;
}

ul.sub-tab li.current a:hover {
  background: #3756CE;
  color: #fff !important;
}

ul.sub-tab-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

ul.sub-tab-wrap a {
  display: inline-block;
  width: 100%;
  padding: 0px 1rem;
  line-height: 2.5rem;
  background: #eaebf2;
  border: 1px #d3d5e1 solid;
  color: #575a70;
  transition: all .3s ease-out;
  text-align: center;
}

ul.sub-tab-wrap a:hover {
  background: #ffffff;
  color: #25262a;
}

ul.sub-tab-wrap li.current a {
  font-weight: 700;
  background: #192d79;
  border-color: #192d79;
  color: #fff;
}


@media screen and (max-width:576px) {

  ul.sub-tab {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: nowrap;
    overflow-x: scroll;
  }


  ul.sub-tab li {
    flex-shrink: 0;
  }

  ul.sub-tab a {
    padding: 0px 1rem;
  }

  ul.sub-tab-wrap {
    justify-content: flex-start;
    gap: 0px;
  }

  ul.sub-tab-wrap li {
    width: calc(50%);
    border-left: 1px solid #adadad;
    border-bottom: 1px solid #adadad;
  }

  ul.sub-tab-wrap li:last-child:nth-child(odd) {
    width: calc(50% + 1px);
  }

  ul.sub-tab-wrap li:first-child,
  ul.sub-tab-wrap li:nth-child(2) {
    border-top: 1px solid #adadad;
  }

  ul.sub-tab-wrap li.vt {
    display: none;
  }

  ul.sub-tab-wrap li:nth-child(even),
  ul.sub-tab-wrap li:last-child {
    border-right: 1px solid #adadad;
  }

  ul.sub-tab-wrap li.current {
    border-color: #192d79;
  }

  ul.sub-tab-wrap li a {
    border: none;
  }
}

ul.tabs-box {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  margin: 0 auto 2rem auto;
  padding: 0;
  position: relative;
  list-style: none;
  overflow: hidden;
}

ul.tabs-box li {

  float: left;
  margin: 0;
  overflow: hidden;
  position: relative;
  background: #fff;
  padding: 0px;
}

ul.tabs-box li a {
  width: 100%;
  text-decoration: none;
  display: inline-block;
  font-size: 0.925rem;
  line-height: 1rem;
  padding: 0.8rem;
  outline: none;
  border: 1px solid #dfdfdf;
  text-align: center;
  margin: 0;
}

ul.tabs-box li:first-child a {
  border-radius: 0.4rem 0 0 0.4rem;
  overflow: hidden;
}

ul.tabs-box li:last-child a {
  border-radius: 0 0.4rem 0.4rem 0;
  overflow: hidden;
}

ul.tabs-box li a:hover {
  font-weight: 600;
  background: #7584DC;
  color: #fff;
}

ul.tabs-box li a>p {
  font-size: 1.2rem;
  font-weight: normal;
  color: rgba(255, 80, 83, 1.00);
  margin: 0.5rem 0 0 0 !important;
}

ul.tabs-box.div-5 li {
  width: calc(20% - 0px);
}

ul.tabs-box.div-6 li {
  width: calc(16.6% - 0px);
}

ul.tabs-box li.active a {
  font-weight: 600;
  background: #4858B2;
  color: #fff;
}

ul.tabs-box li.active a>p {
  color: #FFB5B6;
}

.arrow-lt {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.arrow-lt:after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  top: 3px;
  left: 0;
  border-bottom: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(-45deg);
}

.arrow-lt-wh {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.arrow-lt-wh:after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  top: 3px;
  left: 0;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(-45deg);
}

.arrow-up {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.arrow-up:after {
  content: '';
  position: absolute;
  width: 75%;
  height: 75%;
  top: 15%;
  left: 0;
  transform: rotate(-45deg);
  border-top: 2px solid #000;
  border-right: 2px solid #000;
}

.arrow-down {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.arrow-down:after {
  content: '';
  position: absolute;
  width: 75%;
  height: 75%;
  top: -15%;
  left: 0;
  transform: rotate(-45deg);
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
}


.arrow-up-m {
  display: inline-block;
  position: relative;
  width: 15px;
  height: 15px;
  vertical-align: middle;
}

.arrow-up-m:after {
  content: '';
  position: absolute;
  width: 75%;
  height: 75%;
  top: 15%;
  left: 0;
  transform: rotate(-45deg);
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}

.arrow-down-m {
  display: inline-block;
  position: relative;
  width: 15px;
  height: 15px;
  vertical-align: middle;
}

.arrow-down-m:after {
  content: '';
  position: absolute;
  width: 75%;
  height: 75%;
  top: -15%;
  left: 0;
  transform: rotate(-45deg);
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
}


.arrow-up-s {
  display: inline-block;
  position: relative;
  width: 10px;
  height: 10px;
  vertical-align: middle;
}

.arrow-up-s:after {
  content: '';
  position: absolute;
  width: 75%;
  height: 75%;
  top: 15%;
  left: 0;
  transform: rotate(-45deg);
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}

.arrow-down-s {
  display: inline-block;
  position: relative;
  width: 10px;
  height: 10px;
  vertical-align: middle;
}

.arrow-down-s:after {
  content: '';
  position: absolute;
  width: 75%;
  height: 75%;
  top: -15%;
  left: 0;
  transform: rotate(-45deg);
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
}

a.btn-hot-green {
  display: inline-block;
  padding: 0 2rem;
  font-size: 1.4rem;
  line-height: 3rem;
  border-radius: 1.5rem;
  color: #FFF;
  border: 3px solid #075C00;
  background: rgba(0, 154, 32, 1.00);
  transition: all 0.2s ease-in;
}

a.btn-hot-green:hover {
  font-weight: 500;
  background: rgba(171, 221, 148, 1.00);
  border: 3px solid rgba(171, 221, 148, 1.00);
  color: #075C00;
  transform: scale(1.1);
}

.word-keep {
  word-break: keep-all;
}

.content-edit-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}


/* 신청서 관리 전용 스타일 */
.addr-app-wrap .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-radius: 4px;
}

.addr-app-wrap .card:hover {
  box-shadow: 0 8px 24px rgba(149, 157, 165, 0.2) !important;
}

.addr-app-wrap .card-header {
  border-radius: 4px 12px 0 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.addr-app-wrap .form-label {
  color: #4a5568;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

.addr-app-wrap .form-control,
.addr-app-wrap .form-select {
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  padding: 0.6rem 0.8rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.addr-app-wrap .form-control:focus {
  border-color: #3182ce;
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.addr-app-wrap .badge {
  padding: 0.5em 0.8em;
  border-radius: 4px;
  font-weight: 500;
}

.addr-app-wrap .bg-navy {
  background-color: #1a365d !important;
}

/* 드롭존 커스텀 */
.addr-app-wrap #drop-zone {
  border: 2px dashed #cbd5e0 !important;
  transition: all 0.3s ease;
}

.addr-app-wrap #drop-zone.dragover {
  border-color: #3182ce !important;
  background-color: #ebf8ff !important;
  color: #3182ce;
}

.addr-app-wrap .file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.addr-app-wrap .file-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.addr-app-wrap .file-name {
  font-weight: 500;
  font-size: 0.9rem;
  color: #2d3748;
}

.addr-app-wrap .file-size {
  font-size: 0.75rem;
  color: #718096;
}

.addr-app-wrap .btn-remove {
  color: #e53e3e;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
}

.addr-app-wrap .btn-remove:hover {
  background: #fff5f5;
}

/* 금융회사 검색 레이어 */
.bank-search-layer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  max-width: 900px;
  height: 80vh;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  z-index: 2000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bank-search-layer .header {
  padding: 20px;
  border-bottom: 1px solid #edf2f7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bank-search-layer .body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.bank-search-layer .cate-col {
  flex: 1;
  border-right: 1px solid #edf2f7;
  overflow-y: auto;
  padding: 15px;
}

.bank-search-layer .cate-col:last-child {
  border-right: none;
}

.bank-search-layer .cate-item {
  padding: 12px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 4px;
  transition: all 0.2s;
  font-size: 0.95rem;
}

.bank-search-layer .cate-item:hover {
  background: #f7fafc;
}

.bank-search-layer .cate-item.active {
  background: #ebf8ff;
  color: #2b6cb0;
  font-weight: 600;
}



/* ============================================================
   Site Header - Modern Responsive Navbar 2025
   ============================================================ */
.site-header {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

/* 스크롤 내려가면 유리 느낌 효과 */
.site-header.scrolled {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

/* --- 상단 유틸 (데스크탑 전용) --- */
.site-header .header-top {
  background: #f8faff;
  border-bottom: 1px solid #e8eef8;
  font-size: 13px;
}

.site-header .header-top-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 20px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.site-header .top-util-menu {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #555;
  font-size: 12.5px;
}

.site-header .top-util-menu .member-name {
  font-weight: 700;
  color: #111;
}

.site-header .top-util-menu .member-type {
  font-weight: 400;
  color: #3b82f6;
  margin-left: 2px;
}

.site-header .top-util-menu .divides {
  color: #d1d5db;
  user-select: none;
}

.site-header .top-util-menu a {
  color: #555;
  transition: color 0.2s;
  text-decoration: none;
}

.site-header .top-util-menu a:hover {
  color: #3b82f6;
}



.site-header .alim-badge,
.site-header .talk-badge {
  position: absolute;
  top: -5px;
  right: -17px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  border-radius: 99px;
  min-width: 17px;
  height: 17px;
  line-height: 17px;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  text-align: center;
}

/* --- 메인 헤더 --- */
.site-header .header-main {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  transition: background 0.3s, backdrop-filter 0.3s;
}

.site-header.scrolled .header-main {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.6);
}

.site-header .header-main-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 20px;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 40px;
}

/* --- 로고 --- */
.site-header .header-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-header .header-logo img {
  height: 25px;
}

/* --- GNB (데스크탑) --- */
.site-header .gnb-menu {
  display: flex;
  align-items: center;
  gap: 36px;
  height: 100%;
}

.site-header .gnb-menu>a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 700;
  color: #111;
  text-decoration: none;
  height: 72px;
  transition: color 0.2s;
  white-space: nowrap;
}

.site-header .gnb-menu>a i {
  font-size: 11px;
  color: #9ca3af;
  transition: color 0.2s, transform 0.2s;
}

.site-header .gnb-menu>a:hover {
  color: #3b82f6;
}

.site-header .gnb-menu>a:hover i {
  color: #3b82f6;
  transform: rotate(180deg);
}

/* 하단 액센트 라인 */
.site-header .gnb-menu>a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.5px;
  background: linear-gradient(90deg, #3b82f6, #6366f1);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

.site-header .gnb-menu>a:hover::after {
  transform: scaleX(1);
}

/* --- 헤더 버튼 그룹 --- */
.site-header .header-btns {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.site-header .btn-job-offer {
  border: 1.5px solid #3b82f6;
  color: #3b82f6;
  padding: 9px 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  white-space: nowrap;
  display: inline-block;
}

.site-header .btn-job-offer:hover {
  background: #eff6ff;
  transform: translateY(-1px);
}

.site-header .btn-job-seek {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff;
  padding: 9px 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
  white-space: nowrap;
  display: inline-block;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35);
}

.site-header .btn-job-seek:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.45);
}

/* --- 햄버거 버튼 (모바일 전용) --- */
#hamburger-btn {
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.35);
  transition: box-shadow 0.25s ease, transform 0.2s ease, border-radius 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* 물결 리플 배경 */
#hamburger-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.12);
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: inherit;
}

#hamburger-btn:hover {
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.5);
  transform: translateY(-1px);
}

#hamburger-btn:hover::before {
  opacity: 1;
}

#hamburger-btn:active {
  transform: scale(0.94);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

/* 열린 상태: 원형으로 변함 */
#hamburger-btn.is-open {
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  box-shadow: 0 2px 12px rgba(239, 68, 68, 0.35);
}

/* 내부 아이콘 래퍼 */
#hamburger-btn .burger-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
  align-items: stretch;
  transition: gap 0.3s ease;
}

#hamburger-btn.is-open .burger-icon {
  gap: 0;
}

/* 공통 바 스타일 */
#hamburger-btn .bar {
  display: block;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease,
    width 0.3s ease;
  transform-origin: center;
}

/* 닫힌 상태: 세 줄 */
#hamburger-btn .bar-top {
  width: 20px;
}

#hamburger-btn .bar-mid {
  width: 14px;
}

/* 짧은 중간 라인 (포인트) */
#hamburger-btn .bar-bot {
  width: 20px;
}

/* 열린 상태(is-open): X 형태로 변환 */
#hamburger-btn.is-open .bar-top {
  width: 20px;
  transform: translateY(6px) rotate(45deg);
}

#hamburger-btn.is-open .bar-mid {
  opacity: 0;
  transform: scaleX(0);
}

#hamburger-btn.is-open .bar-bot {
  width: 20px;
  transform: translateY(-6px) rotate(-45deg);
}

/**
* Mobile Navigation 
*/


/* ================================================================
   Mobile GNB Menu
   ================================================================ */
.mobile-gnbmenu-main {
  display: none;
}

@media (max-width: 768px) {
  .mobile-gnbmenu-main {
    display: block;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
  }

  .mobile-gnbmenu-main::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
  }

  .mobile-gnbmenu-inner {
    width: max-content;
    padding: 0 16px;
  }

  .mobile-gnbmenu {
    display: flex;
    align-items: center;
    gap: 22px;
    height: 48px;
  }

  .mobile-gnbmenu a {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    white-space: nowrap;
    text-decoration: none;
    letter-spacing: -0.3px;
    transition: color 0.2s ease;
  }

  .mobile-gnbmenu a i {
    font-size: 11px;
    color: #9ca3af;
    transition: color 0.2s ease;
  }

  /* 인재검색 별 아이콘 등 기존 클래스 우선순위 보호 */
  .mobile-gnbmenu a i.text-danger {
    color: #ef4444 !important;
  }

  .mobile-gnbmenu a:hover,
  .mobile-gnbmenu a:active {
    color: #2563eb;
  }

  .mobile-gnbmenu a:hover i,
  .mobile-gnbmenu a:active i {
    color: #60a5fa;
  }

  .mobile-gnbmenu a:hover i.text-danger,
  .mobile-gnbmenu a:active i.text-danger {
    color: #ef4444 !important;
  }
}

/* --- 모바일 오버레이 --- */
#mobile-menu-overlay {
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s;
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 800;
}

#mobile-menu-overlay.active {
  opacity: 1;
  display: block;
}

/* --- 모바일 드로어 --- */
#mobile-drawer {
  transform: translateX(100%);
  display: none;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  top: 0;
  right: -280px;
  width: 280px;
  height: 100vh;
  background: #fff;
  z-index: 900;
  overflow-y: auto;
  transition: right 0.3s ease;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

#mobile-drawer.open {
  transform: translateX(0);
  display: flex;
  /* [모바일 중심 고정폭 레이아웃] 닫힌 상태(right:-280px)는 뷰포트 폭과 무관하게 항상 화면 밖으로 완전히
     숨겨지므로 그대로 두고, 열린 상태만 셸의 오른쪽 경계에 맞춘다 - PC에서 드로어가 실제 브라우저 끝이 아니라
     .shop-wrap 오른쪽 끝에서 슬라이드인 되도록 함(모바일에서는 갭이 0이라 기존과 동일하게 right:0). */
  right: max(0px, calc((100vw - var(--shop-app-width)) / 2));
}

.mobile-drawer-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--shop-border);
}

.mobile-drawer-header img {
  height: 28px;
}

#mobile-close-btn {
  background: #f3f4f6;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #374151;
  cursor: pointer;
  transition: background 0.2s;
}

#mobile-close-btn:hover {
  background: #e5e7eb;
}

/* --- 모바일 드로어 유저 영역 --- */
.mobile-drawer-user {
  background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
  flex-shrink: 0;
  padding: 16px;
  border-bottom: 1px solid var(--shop-border);
}

.mobile-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.mobile-user-avatar {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--shop-primary-light);
  flex-shrink: 0;
}

.mobile-user-name {
  color: #111;
  font-weight: 700;
  font-size: 0.95rem;
}

.mobile-user-type {
  margin-top: 1px;
  font-size: 0.78rem;
  color: var(--shop-primary);
}

.mobile-user-links {
  flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-user-links a {
  background: #fff;
  border: 1px solid #e0e7ff;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 4px;
  font-size: 0.88rem;
  color: var(--shop-text);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s;
}

.mobile-user-links a:hover {
  border-color: #bfdbfe;
  background: var(--shop-primary-light);
  color: var(--shop-primary);
}

.mobile-login-cta {
  text-align: center;
}

.mobile-login-cta p {
  font-size: 0.85rem;
  color: var(--shop-text-sub);
  margin-bottom: 12px;
}

.mobile-btn-login {
  display: inline-block;
  padding: 9px 24px;
  border: 1.5px solid #3b82f6;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s;
  background: var(--shop-primary);
  color: #fff;
}

.mobile-btn-login:hover {
  background: #eff6ff;
}

.mobile-btn-register {
  display: inline-block;
  padding: 9px 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s;
  background: var(--shop-primary-light);
  color: var(--shop-primary);
}

.mobile-btn-register:hover {
  opacity: 0.9;
}

/* --- 모바일 드로어 네비게이션 --- */
.mobile-drawer-nav {
  flex: 1;
  padding: 8px;
}

.mobile-nav-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--shop-text-sub);
  padding: 12px 8px 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mobile-drawer-nav a {
  font-weight: 600;
  border-bottom: 1px solid #f9fafb;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 0.9rem;
  color: var(--shop-text);
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s;
}

.mobile-drawer-nav a i {
  font-size: 14px;
  width: 20px;
  text-align: center;
  color: var(--shop-primary);
}

.mobile-drawer-nav a:hover {
  color: #6366f1;
  background: var(--shop-primary-light);
}

.mobile-drawer-nav a:active {
  background: #ede9fe;
}

/* --- 모바일 드로어 CTA 버튼 --- */
.mobile-drawer-btns {
  padding: 16px 20px;
  display: flex;
  gap: 10px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.mobile-btn-offer {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 10px;
  border: 1.5px solid #3b82f6;
  color: #3b82f6;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s;
}

.mobile-btn-offer:hover {
  background: #eff6ff;
}

.mobile-btn-seek {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 10px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
  transition: opacity 0.2s;
}

.mobile-btn-seek:hover {
  opacity: 0.9;
}

/* ============================================================
   반응형 미디어 쿼리
   ============================================================ */
@media (max-width: 900px) {

  /* GNB 숨기기 */
  .site-header .gnb-menu {
    display: none;
  }

  /* 데스크탑 버튼 숨기기 */
  .site-header .header-btns {
    display: none;
  }

  /* 상단 유틸 메뉴 숨기기 */
  .site-header .header-top {
    display: none;
  }

  /* 햄버거 버튼 표시 */
  #hamburger-btn {
    display: flex;
  }

  .site-header .header-main-inner {
    gap: 0;
    height: 62px;
    padding: 0 16px;
  }

  .site-header .header-logo {
    margin-right: auto;
  }

  .site-header .header-logo img {
    height: 20px;
  }
}

@media (max-width: 576px) {
  .site-header .header-main-inner {
    padding: 0 14px;
    height: 58px;
  }
}

.site-header .btn-job-offer,
.site-header .btn-job-seek {
  letter-spacing: -0.3px;
}

/* ==========================================================================
   Job Offer Registration (구인 등록/수정) Styles
   ========================================================================== */
.jo-form-wrap {
  flex-grow: 1;
  min-width: 0;
}

.jo-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 1.5rem;
  margin-bottom: 24px;
}

.jo-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #3b82f6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.jo-section-title .ico {
  color: #3b82f6;
}

.jo-row {
  margin-bottom: 16px;
}

.jo-row label.jo-label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #374151;
  margin-bottom: 6px;
}

.jo-row label.jo-label .req {
  color: #ef4444;
  margin-left: 2px;
}

.jo-row .jo-input,
.jo-row .jo-select,
.jo-row .jo-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.jo-row .jo-input:focus,
.jo-row .jo-select:focus,
.jo-row .jo-textarea:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.jo-row .jo-textarea {
  min-height: 120px;
  resize: vertical;
}

.jo-row .jo-hint {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
}

.jo-row-inline {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.jo-row-inline .jo-col {
  flex: 1;
  min-width: 200px;
}

.jo-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.jo-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.jo-radio-group label:hover {
  border-color: #3b82f6;
  background: #eff6ff;
}

.jo-radio-group input[type="radio"]:checked+span,
.jo-radio-group input[type="checkbox"]:checked+span {
  color: #3b82f6;
  font-weight: 600;
}

.jo-radio-group input[type="radio"]:checked~span {
  color: #3b82f6;
}

.jo-pi-card {
  border: 1px solid #e2e8f0;
  padding: 18px;
  border-radius: 4px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.jo-pi-card:hover {
  border-color: #cbd5e1;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.jo-pi-card.active {
  border-color: #2563eb;
  background: #f8fafc;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}

.jo-pi-card .pi-name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}

.jo-pi-card .pi-desc {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 6px;
}

.jo-pi-card .pi-price {
  font-size: 14px;
  font-weight: 600;
  color: #3b82f6;
}

.jo-pi-card .pi-type {
  font-size: 12px;
  color: #9ca3af;
}

.jo-biz-alert {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 4px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 8px;
}

.jo-biz-certi-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.jo-biz-certi-btn:hover {
  background: #1d4ed8;
}

.jo-submit-wrap {
  text-align: center;
  padding: 20px 0;
}

.jo-submit-btn {
  padding: 14px 60px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

.jo-submit-btn:hover {
  background: #1d4ed8;
}

.jo-addr-flex {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.jo-addr-btn {
  padding: 10px 16px;
  background: #374151;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.jo-map-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jo-map-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   Resume Registration & List (이력서 등록/수정/목록) Styles
   ========================================================================== */
.re-form-wrap {
  margin: 0;
  padding: 0;
}

.re-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 1.5rem;
  margin-bottom: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.re-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #3b82f6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.re-section-title .ico {
  color: #3b82f6;
}

.re-row {
  margin-bottom: 16px;
}

.re-row label.re-label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #374151;
  margin-bottom: 6px;
}

.re-row label.re-label .req {
  color: #ef4444;
  margin-left: 2px;
}

.re-row .re-input,
.re-row .re-select,
.re-row .re-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.re-row .re-input:focus,
.re-row .re-select:focus,
.re-row .re-textarea:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.re-row .re-textarea {
  min-height: 150px;
  resize: vertical;
}

.re-row .re-hint {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
}

.re-row-inline {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.re-row-inline .re-row {
  flex: 1;
  min-width: 200px;
}

.re-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.re-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.re-radio-group label:hover {
  border-color: #3b82f6;
  background: #eff6ff;
}

.re-radio-group input[type="radio"]:checked+span {
  color: #3b82f6;
  font-weight: 600;
}

.re-photo-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.re-photo-preview img {
  width: 100px;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #d1d5db;
}

.re-photo-preview .btn-photo-del {
  padding: 6px 12px;
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

/* ── 프로필 사진 상단 배치 레이아웃 ─────────────────────────── */
.re-photo-top-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.re-photo-upload-wrap {
  flex-shrink: 0;
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.re-photo-box {
  width: 120px;
  height: 145px;
  border: 2px dashed #d1d5db;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  position: relative;
}

.re-photo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.re-photo-placeholder {
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
  line-height: 1.6;
}

.re-photo-btns {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.re-photo-btns .btn {
  width: 100%;
  justify-content: center;
}

.re-photo-info-wrap {
  flex: 1;
  min-width: 0;
}

@media (max-width: 576px) {
  .re-photo-top-row {
    flex-direction: column;
    align-items: center;
  }

  .re-photo-upload-wrap {
    width: 100%;
    flex-direction: row;
    gap: 16px;
  }

  .re-photo-box {
    width: 90px;
    height: 110px;
    flex-shrink: 0;
  }
}

/* ── 섹션 타이틀 flex-between (추가 버튼용) ─────────────────── */
.re-section-title.d-flex-between,
.d-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── 학력/자격증/경력 동적 행 ──────────────────────────────── */
.re-sub-row {
  /*border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
    background: #fafafa;*/
  margin-bottom: 10px;
}

.re-sub-inline {
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}

.re-col-date {
  flex: 0 0 130px;
  min-width: 110px;
}

.re-col-check {
  flex: 0 0 70px;
  min-width: 60px;
}

.re-col-btn {
  flex: 0 0 62px;
  min-width: 62px;
}

.re-label-sm {
  display: block;
  font-weight: 600;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
  white-space: nowrap;
}

.re-dash {
  line-height: 38px;
  color: #9ca3af;
  flex-shrink: 0;
  padding-top: 20px;
}

.re-hint {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
}

.re-hint.mb-2 {
  margin-bottom: 8px;
}

/* input/select on sub-row (not inside .re-row) */
.re-sub-row .re-input,
.re-sub-row .re-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.re-sub-row .re-input:focus,
.re-sub-row .re-select:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

@media (max-width: 768px) {
  .re-sub-inline {
    flex-wrap: wrap;
  }

  .re-col-date,
  .re-col-check {
    flex: 1 1 120px;
  }
}


.re-submit-wrap {
  text-align: center;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.re-submit-btn {
  padding: 14px 60px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

.re-submit-btn:hover {
  background: #1d4ed8;
}

.re-cancel-btn {
  padding: 14px 40px;
  background: #9ca3af;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  display: inline-block;
}

.re-cancel-btn:hover {
  background: #4b5563;
}

/* ==========================================================================
   인재검색 페이지 (resume_list.php) 프리미엄 레이아웃
   ========================================================================== */
.rl-page-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 60px;
}

/* ── 히어로 배너 ── */
.rl-hero {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
  border-radius: 20px;
  margin: 24px 0 0;
  overflow: hidden;
  position: relative;
}

.rl-hero::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
}

.rl-hero::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -30px;
  width: 260px;
  height: 260px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 50%;
}

.rl-hero-inner {
  padding: 36px 40px;
  position: relative;
  z-index: 1;
}

.rl-hero-text h1 {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
}

.rl-hero-text p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

.rl-hero-text strong {
  color: #fde68a;
  font-weight: 700;
}

/* ── 검색 패널 ── */
.rl-search-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px 28px 20px;
  margin: 20px 0 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.rl-search-top {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.rl-search-input-wrap {
  flex: 1;
  position: relative;
}

.rl-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 15px;
}

.rl-search-main-input {
  width: 100%;
  padding: 13px 16px 13px 44px;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  font-size: 15px;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fafafa;
}

.rl-search-main-input:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
  background: #fff;
}

.rl-search-submit-btn {
  padding: 0 28px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s, transform 0.1s;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.rl-search-submit-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.rl-filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.rl-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 130px;
  flex: 1;
}

.rl-filter-label {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rl-filter-select {
  padding: 9px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 4px;
  font-size: 13px;
  color: #374151;
  background: #f9fafb;
  cursor: pointer;
  transition: border-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239ca3af' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

.rl-filter-select:focus {
  border-color: #3b82f6;
  outline: none;
}

.rl-filter-reset {
  display: flex;
  align-items: flex-end;
}

.rl-reset-btn {
  padding: 9px 16px;
  border: 1.5px solid #e5e7eb;
  border-radius: 4px;
  font-size: 13px;
  color: #6b7280;
  background: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.rl-reset-btn:hover {
  border-color: #d1d5db;
  background: #f3f4f6;
  color: #374151;
}

/* ── 결과 바 ── */
.rl-result-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 4px 12px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 20px;
}

.rl-result-count {
  font-size: 14px;
  color: #4b5563;
}

.rl-result-count strong {
  color: #2563eb;
  font-weight: 700;
}

.rl-filter-active-badge {
  display: inline-flex;
  align-items: center;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  margin-right: 8px;
}

/* ── 카드 그리드 ── */
.rl-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

/* ── 인재 카드 ── */
.rl-card {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.rl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.13);
  border-color: #93c5fd;
}

.rl-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 22px 22px 16px;
}

.rl-card-link:hover {
  text-decoration: none;
  color: inherit;
}

/* 카드 상단 */
.rl-card-top {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  align-items: flex-start;
}

.rl-card-photo {
  position: relative;
  flex-shrink: 0;
  width: 68px;
  height: 84px;
}

.rl-card-photo img {
  width: 68px;
  height: 84px;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid #e5e7eb;
}

.rl-card-photo-placeholder {
  width: 68px;
  height: 84px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.rl-card-photo-placeholder.rl-gender-male {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #2563eb;
}

.rl-card-photo-placeholder.rl-gender-female {
  background: linear-gradient(135deg, #fce7f3, #fbcfe8);
  color: #db2777;
}

.rl-card-photo-placeholder:not(.rl-gender-male):not(.rl-gender-female) {
  background: #f1f5f9;
  color: #94a3b8;
}

.rl-gender-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.rl-gender-badge.rl-gender-male {
  background: #2563eb;
  color: #fff;
}

.rl-gender-badge.rl-gender-female {
  background: #db2777;
  color: #fff;
}

.rl-card-info {
  flex: 1;
  min-width: 0;
}

.rl-card-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.rl-card-name {
  font-size: 17px;
  font-weight: 800;
  color: #111827;
}

.rl-card-age {
  font-size: 12px;
  color: #9ca3af;
  font-weight: 500;
}

.rl-expiring-badge {
  font-size: 10px;
  font-weight: 700;
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 1px 5px;
}

.rl-card-title {
  font-size: 13px;
  color: #374151;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 8px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.rl-card-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rl-meta-item {
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 4px;
}

.rl-meta-item i {
  color: #9ca3af;
  width: 12px;
}

/* 태그 영역 */
.rl-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding-top: 12px;
  border-top: 1px dashed #f1f5f9;
}

.rl-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  padding: 4px 9px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rl-tag-local {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.rl-tag-job {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.rl-tag-industry {
  background: #fdf4ff;
  color: #9333ea;
  border: 1px solid #e9d5ff;
}

/* 카드 하단 */
.rl-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 22px 16px;
}

.rl-card-date {
  font-size: 11px;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 4px;
}

.rl-status-badge {
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 10px;
}

.rl-status-active {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

/* 찜 버튼 */
.rl-scrap-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.rl-scrap-btn:hover {
  border-color: #fca5a5;
  color: #ef4444;
  background: #fff1f2;
}

.rl-scrap-btn.rl-scrap-active {
  border-color: #ef4444;
  color: #ef4444;
  background: #fff1f2;
}

/* ── 빈 결과 ── */
.rl-empty {
  text-align: center;
  padding: 80px 20px;
  color: #9ca3af;
}

.rl-empty i {
  font-size: 52px;
  display: block;
  margin-bottom: 16px;
  color: #d1d5db;
}

.rl-empty p {
  font-size: 16px;
  margin: 0 0 16px;
}

/* ── 페이징 ── */
.rl-paging {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

/* ── 반응형 ── */
@media (max-width: 768px) {
  .rl-hero-inner {
    padding: 24px 20px;
  }

  .rl-hero-text h1 {
    font-size: 20px;
  }

  .rl-search-panel {
    padding: 18px 16px 16px;
  }

  .rl-search-top {
    flex-direction: column;
  }

  .rl-search-submit-btn {
    padding: 13px;
    width: 100%;
  }

  .rl-filter-row {
    gap: 8px;
  }

  .rl-filter-group {
    min-width: calc(50% - 4px);
    flex: 0 0 calc(50% - 4px);
  }

  .rl-card-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .rl-filter-group {
    min-width: 100%;
    flex: 0 0 100%;
  }
}

.re-list-wrap {
  max-width: 900px;
  margin: 30px auto;
  padding: 0 15px;
}

.re-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.re-list-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.re-write-btn {
  padding: 10px 20px;
  background: #2563eb;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}

.re-write-btn:hover {
  background: #1d4ed8;
  color: #fff;
}

.re-table-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.re-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}

.re-table th {
  background: #f9fafb;
  padding: 16px 20px;
  font-weight: 600;
  color: #4b5563;
  border-bottom: 1px solid #e5e7eb;
}

.re-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  color: #374151;
  vertical-align: middle;
}

.re-table tr:last-child td {
  border-bottom: none;
}

.re-table tr:hover td {
  background: #f8fafc;
}

.re-title-link {
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.re-title-link:hover {
  text-decoration: underline;
}

.re-title-link .photo-ico {
  font-size: 14px;
  color: #10b981;
}

.re-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.re-badge-local {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.re-badge-job {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.re-badge-industry {
  background: #fdf2f8;
  color: #9d174d;
  border: 1px solid #fbcfe8;
}

.re-badge-status {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.re-actions {
  display: flex;
  gap: 8px;
}

.re-btn-sm {
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #d1d5db;
  transition: all 0.2s;
  cursor: pointer;
}

.re-btn-edit {
  background: #fff;
  color: #4b5563;
}

.re-btn-edit:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.re-btn-del {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

.re-btn-del:hover {
  background: #fecaca;
}

/* ==========================================================================
   My Page Dashboard & Navigation (마이페이지) Styles
   ========================================================================== */
.mp-container {
  width: 100%;
  margin: 30px auto;
  padding: 0 15px;
  display: flex;
  gap: 30px;
}

.mp-sidebar {
  width: 260px;
  flex-shrink: 0;
}

.mp-content {
  flex-grow: 1;
  min-width: 0;
}

.mp-profile-card {
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  color: #fff;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
  margin-bottom: 20px;
}

.mp-profile-avatar {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  border: 3px solid rgba(255, 255, 255, 0.5);
  margin-bottom: 12px;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.mp-profile-avatar.biz {
  width: 140px;
  height: 90px;
  border-radius: 4px;
}

.mp-profile-avatar.biz .mp-avatar-img {
  border-radius: 4px;
}

.mp-profile-avatar.biz .mp-avatar-overlay {
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.mp-profile-avatar:hover {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4);
}

.mp-avatar-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.mp-avatar-emoji {
  position: relative;
  z-index: 1;
}

.mp-avatar-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 2;
}

.mp-profile-avatar:hover .mp-avatar-overlay {
  opacity: 1;
}

.mp-profile-name {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.mp-profile-role {
  font-size: 12px;
  background: rgba(255, 255, 255, 0.2);
  padding: 3px 10px;
  border-radius: 30px;
  display: inline-block;
  font-weight: 600;
}

.mp-profile-point {
  font-size: 14px;
  margin-top: 15px;
  color: #e0f2fe;
}

.mp-nav {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 10px 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.mp-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  color: #4b5563;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border-left: 4px solid transparent;
  transition: all 0.2s;
}

.mp-nav-item:hover {
  background: #eff6ff;
  color: #2563eb;
}

.mp-nav-item.active {
  background: #eff6ff;
  color: #2563eb;
  border-left-color: #2563eb;
}

.mp-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.mp-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}

.mp-card:hover {
  transform: translateY(-3px);
}

.mp-card-info h3 {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 6px 0;
  font-weight: 600;
}

.mp-card-info p {
  font-size: 26px;
  font-weight: 800;
  color: #1f2937;
  margin: 0;
}

.mp-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.mp-card-icon.blue {
  background: #eff6ff;
  color: #2563eb;
}

.mp-card-icon.green {
  background: #f0fdf4;
  color: #166534;
}

.mp-card-icon.purple {
  background: #faf5ff;
  color: #7e22ce;
}

.mp-content-box {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.mp-content-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 20px 0;
  border-bottom: 2px solid #f3f4f6;
  padding-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mp-search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.mp-search-input {
  flex-grow: 1;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.mp-search-btn {
  padding: 10px 20px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}

.mp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
}

.mp-table th {
  background: #f9fafb;
  padding: 0.6rem 0.5rem;
  font-weight: 600;
  color: #4b5563;
  border-bottom: 1px solid #e5e7eb;
}

.mp-table td {
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid #e5e7eb;
  color: #374151;
  vertical-align: middle;
}

.mp-table tr:hover td {
  background: #f9fafb;
}

.mp-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
}

.mp-badge-gray {
  background: #f3f4f6;
  color: #374151;
  border-color: #e5e7eb;
}

.mp-badge-blue {
  background: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}

.mp-badge-green {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}

.no-data {
  text-align: center;
  padding: 40px 0;
  color: #9ca3af;
}

.mp-mobile-nav {
  display: none;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.mp-mobile-nav-item {
  display: inline-block;
  padding: 14px 20px;
  color: #4b5563;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 3px solid transparent;
}

.mp-mobile-nav-item.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

@media (max-width: 1200px) {
  .mp-container {
    flex-direction: column;
    gap: 15px;
    margin: 15px auto;
  }

  .mp-profile-card {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  .mp-profile-point {
    margin-top: 0;
  }

  .mp-sidebar {
    width: 100%;
  }

  .mp-nav {
    display: none;
  }

  .mp-mobile-nav {
    display: flex;
  }

  .mp-content-box {
    padding: 20px;
  }
}


@media (max-width: 768px) {

  .mp-container {
    padding: 0px;
  }

  .mp-profile-card {
    display: block;
  }

  .mp-profile-point {
    margin-top: 15px;
  }

  .mp-content-box {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

}


/* ==========================================================================
   Merged Styles from Theme Files (theme/cst 폴더 내 개별 파일에서 병합된 스타일)
   ========================================================================== */

/* 1. Modal/Popup Styles (from newwin.inc.php) */
.modal {
  padding: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: none;
}

.modal img {
  width: 100%;
}



.my_login_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24rem;
  background: rgba(0, 0, 0, 0.6);
  opacity: 1;
  z-index: 1;
}

.my_login_bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 28rem;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
  z-index: -1;
}

.my_login_bg_bg1::after {
  background-image: url('../img/loginbg/bg1.jpg');
}

.my_login_bg_bg2::after {
  background-image: url('../img/loginbg/bg2.jpg');
}

.my_login_bg_bg3::after {
  background-image: url('../img/loginbg/bg3.jpg');
}

.my_login_bg_bg4::after {
  background-image: url('../img/loginbg/bg4.jpg');
}

#mb_login_Wrap {
  font-family: "NEXON", "Roboto", "Noto Sans KR";
  position: relative;
  z-index: 99;
  width: 90%;
  max-width: 700px;
  margin: 8rem auto;
  background: rgba(255, 255, 255, 0.9);
}

#mb_login_Wrap .sub-title1 {
  font-weight: 400;
  font-size: 2rem;
  color: #000;
  text-align: center;
}

#mb_login {
  background: #FFF;
  box-shadow: 0 0 10px rgb(57 96 247 / 0.2);
  width: 90%;
  max-width: 700px;
  box-sizing: border-box;
  padding: 4rem 2rem;
  margin: 2rem auto;
}

#login_fs {
  border: 0;
  padding: 0;
}

#login_fs .w-full.block.px-4.py-2.border.border-gray-300.rounded-md.focus\:ring-2.focus\:ring-blue-500 {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
  height: 50px;
  line-height: 50px;
  border: 0;
  border-bottom: 2px solid #ddd;
  padding: 0 10px;
  font-size: 1rem;
}

#login_fs .w-full.block.px-4.py-2.border.border-gray-300.rounded-md.focus\:ring-2.focus\:ring-blue-500:hover,
#login_fs .w-full.block.px-4.py-2.border.border-gray-300.rounded-md.focus\:ring-2.focus\:ring-blue-500:focus {
  outline: 0 !important;
  border: 0 !important;
  border-bottom: 2px solid #3960F7 !important;
}

#login_fs .px-8.py-4.text-lg {
  display: block;
  width: 100%;
  height: 50px;
  text-align: center;
  font-weight: bold;
  font-size: 1.1rem;
  border: 0;
  margin-top: 2rem;
  box-shadow: 0 0 8px rgb(0 0 0 / 45%);
}

.copy {
  font-family: "NEXON", "Roboto", "Noto Sans KR";
  color: #bdbdbd;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 400;
  padding: 1rem 0 5rem;
  letter-spacing: 0.05rem;
}

/* 3. Password Update Styles (from password_update.skin.php) */
.pwd-update-main {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
}

.pwd-update-main::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: url('../img/bg/car2.jpg') 50% 50% no-repeat;
  background-size: cover;
  background-attachment: fixed !important;
}

/* 4. Login Skin Styles (from login.skin.php) */
.login-container {
  max-width: 1000px;
  margin: 60px auto;
  display: flex;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  min-height: 570px;
}

.login-form-side {
  flex: 1;
  padding: 30px;
}

.login-banner-side {
  flex: 1;
  background: url('../img/login_banner.jpg') no-repeat center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  color: #fff;
  position: relative;
}

.login-banner-side::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.login-banner-content {
  position: relative;
  z-index: 2;
}

.login-tabs {
  display: flex;
  border-bottom: 2px solid #f1f1f1;
  margin-bottom: 30px;
}

.login-tab {
  flex: 1;
  text-align: center;
  padding: 15px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  color: #999;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
}

.login-tab.active {
  color: #ff5000;
  border-bottom-color: #ff5000;
}

.login-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}

.login-input:focus {
  border-color: #ff5000;
  outline: none;
}

.btn-login {
  width: 100%;
  padding: 16px;
  background: #ff5000;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 10px;
}

.btn-login:hover {
  background: #e64900;
}

.login-utils {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  font-size: 14px;
  color: #767676;
}

.login-utils a:hover {
  text-decoration: underline;
}

/* 5. Password Eye Icon Styles (from register_form.skin.php, register_form.skin.sms.php) */
div .password-eye {
  position: absolute;
  right: 10px;
  top: 0px;
}

div .password-eye.un {
  opacity: 0.3;
}

/* 6. Register Form Tabs (from register_form.skin.php) */
.reg-tabs {
  display: flex;
  border-bottom: 2px solid #f1f1f1;
  margin-bottom: 24px;
}

.reg-tab {
  flex: 1;
  text-align: center;
  padding: 14px 0;
  font-size: 16px;
  font-weight: bold;
  color: #999;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
  cursor: pointer;
  text-decoration: none !important;
}

.reg-tab:hover {
  color: #555;
}

.reg-tab.active {
  color: #ff5000;
  border-bottom-color: #ff5000;
}

/* ==========================================================================
   Merged Styles from Contents Files (/contents 폴더 내 개별 파일에서 병합된 스타일)
   ========================================================================== */

/* 1. Talk / Chat Styles (from talk.php) */
#talk_container {
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.talk-header {
  padding: 15px;
  border-bottom: 1px solid #eee;
  background: #fff;
  font-weight: bold;
  font-size: 16px;
}

#talk_box {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background: #eee;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

.memo-info {
  font-size: 11px;
  color: #999;
  margin-top: 4px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
}

.text-danger {
  color: #e53e3e;
  text-decoration: none;
  cursor: pointer;
}

.talk-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 반응형 높이 고정용 커스텀 CSS */
.talk-container-h {
  height: auto;
}

.talk-list-h {
  height: 400px;
}

.talk-room-h {
  height: 500px;
}


.memo-line {
  display: flex;
  margin-bottom: 10px;
}

.memo-line.ar {
  justify-content: flex-end;
  /* 본인 */
}

.memo-line.al {
  justify-content: flex-start;
  /* 상대 */
}

.memo-content {
  max-width: 90%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.95em;
  position: relative;
}

.ar .memo-content {
  background: #fee500;
  border-top-right-radius: 0;
}

.al .memo-content {
  background: #fff;
  border-top-left-radius: 0;
}


#ftalk textarea {
  resize: none;
}

.talk-file-box {
  border: 1px solid #ddd;
  background: #fff;
  padding: 5px;
  margin-top: 5px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 220px;
  max-width: 100%;
}

.talk-file-box .file-thumb {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid #eee;
}

.talk-file-box .file-info {
  flex: 1;
  overflow: hidden;
}

.talk-file-box .file-name {
  font-size: 0.85em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.talk-file-box .file-size {
  font-size: 0.75em;
  color: #888;
}

.talk-file-box .file-down {
  font-size: 1.1em;
  color: #333;
}


@media (min-width: 768px) {
  .talk-container-h {
    height: 800px;
  }

  .talk-list-h {
    height: 100%;
  }

  .talk-room-h {
    height: 100%;
  }


  .memo-content {
    max-width: 90%;
  }
}

@media (max-width: 767px) {
  .talk-room-container-hide {
    display: none !important;
  }
}



/* 2. Job Offer Form Styles (from job_offer.php) */

.jo-pi-card.active::after {
  content: "✓";
  position: absolute;
  top: 12px;
  right: 12px;
  background: #2563eb;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
}

.ui-datepicker-unselectable.ui-state-disabled span {
  background: #f1f5f9 !important;
  color: #cbd5e1 !important;
  text-decoration: line-through;
  opacity: 0.6;
}

.jo-submit-btn.btn-pay-mode {
  background: #f59e0b !important;
  color: #fff !important;
}

.jo-submit-btn.btn-pay-mode:hover {
  background: #d97706 !important;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  display: flex;
}

/* --- 반응형: back-to-top 모바일 조정 --- */
/* [모바일 중심 고정폭 레이아웃] 이 미디어쿼리는 600~768px 구간도 포함하는데, 그 구간은 셸(600px)과 실제
   뷰포트 사이에 좌우 여백이 이미 생긴다. right를 여기서 16px로 고정하면 기본 규칙(.back-to-top, 230행 부근)의
   셸 경계 기준 계산을 다시 뷰포트 기준으로 덮어써버리므로, right는 이 블록에서 제거하고 기본 규칙의
   max(16px, calc(...))가 모든 폭에서 그대로 적용되게 한다(600px 이하에서는 어차피 16px와 동일한 값이 나와
   기존 모바일 화면과 결과가 같다). bottom/크기 축소는 모바일 전용 조정이라 그대로 유지한다.
*/
@media (max-width: 768px) {
  .back-to-top {
    bottom: 16px;
    width: 40px;
    height: 40px;
    font-size: 14px;
    border-radius: 10px;
  }
}


/* ============================================================
   소셜 로그인 구분선
   ============================================================ */
.sns-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 4px;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sns-divider::before,
.sns-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

/* ============================================================
   Login Page Responsive
   ============================================================ */
@media (max-width: 860px) {

  /* 배너 패널 숨기고 폼 전체 너비 */
  .login-container {
    flex-direction: column;
    margin: 30px 16px;
    border-radius: 10px;
    min-height: auto;
  }

  .login-banner-side {
    display: none;
  }

  .login-form-side {
    flex: none;
    width: 100%;
    padding: 32px 28px;
  }

  .login-tab {
    font-size: 15px;
    padding: 13px 10px;
  }

  .login-input {
    font-size: 14px;
    padding: 13px 14px;
  }

  .btn-login {
    font-size: 16px;
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .login-container {
    margin: 14px 10px;
    border-radius: 4px;
  }

  .login-form-side {
    padding: 22px 16px;
  }

  .login-tab {
    font-size: 14px;
    padding: 12px 6px;
  }

  .login-input {
    padding: 12px;
    margin-bottom: 10px;
  }

  .btn-login {
    font-size: 15px;
    padding: 13px;
    margin-top: 6px;
  }

  .login-utils {
    font-size: 13px;
    gap: 14px;
    margin-top: 14px;
  }

  /* 소셜 로그인: 모바일에서 약간 작게 */
  #sns_login .sns-icon {
    width: 52px;
    height: 60px;
  }

  #sns_login .sns-icon .ico {
    width: 28px;
    height: 28px;
  }

  #sns_login .sns-wrap {
    gap: 8px;
  }
}


/* ================================================================
   채용공고 상세검색 패널 (Advanced Search Panel)
   ================================================================ */

/* 오버레이 (배경 딤) */
#adv-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1050;
}

/* 메인 패널 - 알 나타나는 clip-path 컴보 */
#adv-search-panel {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 1260px;
  max-height: 80vh;
  background: #fff;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
  z-index: 1051;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 선언시 헤더 아래에 클립으로 숨김 */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

#adv-search-panel.open {
  clip-path: inset(0 0 0% 0);
  pointer-events: auto;
}

/* 패널 헤더 */
.adv-search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.adv-search-title {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.3px;
}

.adv-search-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: #6b7280;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}

.adv-search-close:hover {
  background: #f3f4f6;
  color: #111827;
}

/* 검색 탭 */
.adv-search-tabs {
  display: flex;
  gap: 0;
  padding: 0 24px;
  border-bottom: 2px solid #e5e7eb;
  background: #f9fafb;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.adv-search-tabs::-webkit-scrollbar {
  display: none;
}

.adv-tab {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  padding: 13px 18px 11px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s;
  line-height: 1;
}

.adv-tab:hover {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

.adv-tab.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
  background: #fff;
}

/* 체크박스 그리드 콘텐츠 - 최대높이 수정 */
.adv-search-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  min-height: 200px;
  max-height: 340px;
}

/* 2단계 레이아웃 */
.adv-two-level-layout {
  display: flex;
  height: 100%;
  min-height: 200px;
  gap: 0;
}

/* 1차 목록 (lv1) */
.adv-lv1-list {
  width: 160px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid #e5e7eb;
  padding: 4px 0;
  background: #f9fafb;
}

.adv-lv1-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 9px 14px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.adv-lv1-btn:hover {
  background: #eff6ff;
  color: #3b82f6;
}

.adv-lv1-btn.active {
  background: #eff6ff;
  color: #3b82f6;
  font-weight: 700;
  border-left-color: #3b82f6;
}

/* 2차 영역 (lv2) */
.adv-lv2-area {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px;
}

.adv-lv2-title {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #e5e7eb;
}

.adv-lv2-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #d1d5db;
  font-style: italic;
  padding: 20px 10px;
}

.adv-lv2-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #9ca3af;
  padding: 20px 10px;
}

/* 체크박스 그리드 (공통) */

.adv-checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.adv-chk-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: #374151;
  background: #fff;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
  overflow: hidden;
  max-width: 100%;
}

.adv-chk-item span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.adv-chk-item:hover {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #3b82f6;
}

.adv-chk-item.selected {
  border-color: #3b82f6;
  background: #eff6ff;
  color: #3b82f6;
  font-weight: 600;
}

.adv-chk-item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #3b82f6;
  flex-shrink: 0;
  cursor: pointer;
}

/* 선택 조건 태그 영역 */
.adv-selected-area {
  border-top: 1px solid #e5e7eb;
  padding: 12px 24px;
  background: #f9fafb;
  flex-shrink: 0;
  min-height: 56px;
}

.adv-selected-label {
  font-size: 12px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.adv-selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
}

.adv-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #3b82f6;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px 4px 12px;
  border-radius: 20px;
  animation: tagFadeIn 0.2s ease;
}

@keyframes tagFadeIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.adv-tag button {
  background: rgba(255, 255, 255, 0.25);
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 3px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.adv-tag button:hover {
  background: rgba(255, 255, 255, 0.45);
}

.adv-empty-msg {
  font-size: 13px;
  color: #d1d5db;
  font-style: italic;
}

/* 하단 버튼 */
.adv-search-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.adv-btn-reset {
  background: #fff;
  border: 1.5px solid #d1d5db;
  color: #6b7280;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.adv-btn-reset:hover {
  border-color: #9ca3af;
  color: #374151;
  background: #f9fafb;
}

.adv-btn-search {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 28px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: opacity 0.15s, transform 0.1s;
  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.35);
}

.adv-btn-search:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* 선택 태그 구분자 (›) */
.adv-tag-sep {
  font-size: 11px;
  opacity: 0.8;
  margin: 0 1px;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  #adv-search-panel {
    width: 100%;
    border-radius: 0;
  }

  .adv-search-tabs {
    padding: 0px 8px;
  }

  .adv-tab {
    padding: 12px 10px 12px;
    font-size: 12px;
  }

  .adv-search-content {
    padding: 10px 12px;
    max-height: 260px;
  }

  /* 모바일 2단계: 세로 스택 */
  .adv-two-level-layout {
    flex-direction: column;
    min-height: auto;
  }

  .adv-lv1-list {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
    padding: 0;
    scrollbar-width: none;
  }

  .adv-lv1-list::-webkit-scrollbar {
    display: none;
  }

  .adv-lv1-btn {
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 7px 12px;
  }

  .adv-lv1-btn.active {
    border-left-color: transparent;
    border-bottom-color: #3b82f6;
  }

  .adv-lv2-area {
    padding: 8px 12px;
    max-height: 180px;
  }

  .adv-checkbox-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 6px;
  }

  .adv-chk-item {
    font-size: 12px;
    padding: 6px 10px;
  }

  .adv-selected-area {
    padding: 10px 14px;
  }

  .adv-search-footer {
    padding: 10px 14px;
  }

  .adv-btn-reset,
  .adv-btn-search {
    font-size: 13px;
    padding: 9px 14px;
  }
}

/* ================================================================
   Jobs Page (jobs.php) - 상세검색 패널 상시 노출 모드
   ================================================================ */
body.page-jobs #adv-search-overlay {
  display: none !important;
}

body.page-jobs .adv-search-close {
  display: none !important;
}

body.page-jobs #adv-search-panel {
  position: relative;
  top: auto !important;
  left: auto;
  transform: none;
  width: 100%;
  max-width: 1260px;
  margin: 24px auto 30px auto;
  clip-path: none;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  pointer-events: auto;
  transition: none;
}

body.page-jobs #adv-tab-content {
  max-height: 4rem;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
  border-top: none;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

body.page-jobs #adv-tab-content.expanded {
  max-height: 600px;
  padding-top: 16px;
  padding-bottom: 16px;
  border-top: 1px solid #f3f4f6;
}

/* 뷰어 토글 컨테이너 (jobs.php 내 리스트/그리드) */
.jobs-viewer-btns {
  display: flex;
  gap: 8px;
}

.jobs-viewer-btns button {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.jobs-viewer-btns button:hover {
  background: #f9fafb;
  color: #374151;
}

.jobs-viewer-btns button.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

/* 공고 리스트 영역 */
.jobs-list-container {
  max-width: 1260px;
  margin: 0 auto 60px;
  padding: 0 16px;
}

/* 목록형 (List) 레이아웃 */
.jobs-list-container.view-list .jobs-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 타일형 (Grid) 레이아웃 */
.jobs-list-container.view-grid .jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* 개별 공고 카드 */
.job-card {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 20px;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.job-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border-color: #d1d5db;
}

/* 찜하기(스크랩) 버튼 */
.job-btn-scrap {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  color: #e5e7eb;
  font-size: 22px;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 10;
  padding: 0;
}

.job-btn-scrap:hover {
  transform: scale(1.1);
  color: #fca5a5;
}

.job-btn-scrap.active {
  color: #ef4444;
  /* 빨간색 하트 */
}

.job-card .comp-name {
  font-size: 13px;
  font-weight: 700;
  color: #4b5563;
  margin-bottom: 8px;
}

.job-card .job-title {
  font-size: 17px;
  font-weight: 800;
  color: #111827;
  line-height: 1.4;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.job-card .job-info-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.job-card .job-info-tags span {
  font-size: 12px;
  background: #f3f4f6;
  color: #6b7280;
  padding: 4px 8px;
  border-radius: 4px;
}

.job-card .job-meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px dashed #e5e7eb;
}

.job-card .job-salary {
  font-size: 14px;
  font-weight: 700;
  color: #3b82f6;
}

.job-card .job-deadline {
  font-size: 12px;
  color: #ef4444;
  font-weight: 600;
}

/* 목록형일 때 개별 카드 모양 변경 */
.jobs-list-container.view-list .job-card {
  flex-direction: row;
  align-items: center;
  padding: 24px;
  gap: 24px;
}

.jobs-list-container.view-list .job-card .comp-name {
  width: 180px;
  margin: 0;
  flex-shrink: 0;
}

.jobs-list-container.view-list .job-card .job-title {
  flex: 1;
  margin: 0;
  -webkit-line-clamp: 1;
}

.jobs-list-container.view-list .job-card .job-info-tags {
  margin: 0;
  flex-shrink: 0;
  width: 250px;
}

.jobs-list-container.view-list .job-card .job-meta {
  margin: 0;
  padding: 0;
  border: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  width: 120px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .jobs-list-container.view-list .job-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }

  .jobs-list-container.view-list .job-card .comp-name,
  .jobs-list-container.view-list .job-card .job-info-tags,
  .jobs-list-container.view-list .job-card .job-meta {
    width: 100%;
  }

  .jobs-list-container.view-list .job-card .job-meta {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed #e5e7eb;
    padding-top: 12px;
  }

  body.page-jobs #adv-search-panel {
    width: calc(100% - 24px);
  }
}

/* Tailwind CSS utility fallbacks */
.text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

.text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

/* ================================================================
   Resume View Popup (resume_view.pop.php) Style
   ================================================================ */
.rv-wrap {
  width: 100%;
  margin: 0 auto;
  padding: 0px;
}

/* 헤더 */
.rv-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 28px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
}

.rv-photo {
  flex-shrink: 0;
  width: 110px;
  height: 140px;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid #e5e7eb;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rv-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rv-photo-placeholder {
  font-size: 36px;
  color: #9ca3af;
}

.rv-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.rv-name {
  font-size: 22px;
  font-weight: 800;
  color: #111827;
}

.rv-age-sex {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.rv-title {
  font-size: 15px;
  font-weight: 600;
  color: #2563eb;
  margin-bottom: 14px;
}

.rv-contacts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rv-contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #4b5563;
}

.rv-contact-row i {
  width: 16px;
  color: #9ca3af;
  text-align: center;
}

/* 섹션 공통 */
.rv-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.rv-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rv-section-title i {
  color: #3b82f6;
}

/* 희망 근무조건 그리드 */
.rv-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  font-size: 13px;
}

.rv-info-row {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.rv-info-label {
  min-width: 72px;
  color: #9ca3af;
  font-weight: 600;
  white-space: nowrap;
}

.rv-info-value {
  color: #1f2937;
  flex: 1;
}

/* 학력/자격/경력 항목 */
.rv-sub-item {
  padding: 10px 0;
  border-bottom: 1px dashed #f1f5f9;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font-size: 13px;
}

.rv-sub-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.rv-sub-date {
  color: #6b7280;
  white-space: nowrap;
  min-width: 140px;
}

.rv-sub-main {
  font-weight: 700;
  color: #111827;
}

.rv-sub-detail {
  color: #6b7280;
}

.rv-empty-data {
  color: #9ca3af;
  font-size: 13px;
}

/* 자기소개서 */
.rv-desc {
  font-size: 14px;
  color: #374151;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 100px;
}

@media (max-width: 600px) {
  .rv-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .rv-contacts {
    align-items: center;
  }

  .rv-info-grid {
    grid-template-columns: 1fr;
  }
}

/*--------------------------------------------------------------
# 고객센터 레이아웃
--------------------------------------------------------------*/

/* 2단 레이아웃 컨테이너 */
.cs-layout {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

/* 좌측 사이드메뉴 영역 */
.cs-sidemenu-wrap {
  flex: 0 0 200px;
  min-width: 180px;
}

/* 우측 컨텐츠 영역 */
.cs-content-wrap {
  flex: 1;
  min-width: 0;
}

.cs-content-inner {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 2rem;
  min-height: 400px;
}

/* 고객센터 페이지 제목 */
.cs-page-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1f2937;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #3b82f6;
}

/* ===== 사이드메뉴 스타일 ===== */
.cs-sidemenu {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.cs-sidemenu-title {
  background: #1e40af;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.9rem 1.2rem;
  letter-spacing: 0.02em;
}

.cs-menu-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}

.cs-menu-list>li {
  margin: 0;
}

/* 1단계 메뉴 링크 */
.cs-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.cs-menu-item:hover {
  background: #eff6ff;
  color: #1d4ed8;
}

.cs-menu-item.active {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 700;
  border-left: 3px solid #3b82f6;
}

.cs-menu-item.cs-menu-parent {
  user-select: none;
}

.cs-menu-arrow {
  font-size: 0.7rem;
  color: #9ca3af;
  transition: transform 0.2s;
}

/* 서브메뉴 그룹 */
.cs-menu-group>.cs-menu-item {
  /* 부모 라벨은 a 태그가 아닌 span */
}

.cs-submenu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #f9fafb;
  border-top: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
}

.cs-menu-group.open>.cs-submenu {
  display: block;
}

.cs-menu-group.open .cs-menu-arrow {
  transform: rotate(180deg);
}

/* 2단계 서브메뉴 링크 */
.cs-submenu-item {
  display: block;
  padding: 0.55rem 1.2rem 0.55rem 2rem;
  font-size: 0.85rem;
  color: #6b7280;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  position: relative;
}

.cs-submenu-item::before {
  content: '';
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d1d5db;
}

.cs-submenu-item:hover {
  background: #eff6ff;
  color: #1d4ed8;
}

.cs-submenu-item.active {
  color: #1d4ed8;
  font-weight: 600;
}

.cs-submenu-item.active::before {
  background: #3b82f6;
}

/* ===== 유료광고상품안내 ===== */
.cs-product-intro {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  color: #1e40af;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.cs-product-table-wrap {
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.cs-product-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.cs-product-table thead tr {
  background: #1e40af;
  color: #fff;
}

.cs-product-table thead th {
  padding: 0.75rem 1rem;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
}

.cs-product-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
  transition: background 0.1s;
}

.cs-product-table tbody tr:hover {
  background: #f8fafc;
}

.cs-product-table tbody td {
  padding: 0.8rem 1rem;
  vertical-align: middle;
  color: #374151;
}

.cs-product-name {
  font-weight: 600;
  white-space: nowrap;
}

.cs-product-desc {
  color: #6b7280;
  font-size: 0.85rem;
  line-height: 1.5;
}

.cs-product-day {
  white-space: nowrap;
}

.cs-product-price {
  white-space: nowrap;
  font-size: 1rem;
}

.cs-product-price strong {
  font-size: 1.1rem;
  color: #dc2626;
}

/* 이용안내 박스 */
.cs-product-notice {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem 1.2rem;
}

.cs-product-notice h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #374151;
  margin-bottom: 0.6rem;
}

.cs-product-notice ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cs-product-notice ul li {
  font-size: 0.83rem;
  color: #6b7280;
  padding: 0.2rem 0 0.2rem 1rem;
  position: relative;
}

.cs-product-notice ul li::before {
  content: '·';
  position: absolute;
  left: 0.3rem;
  font-weight: 700;
}

/* ===== 이미지 레이어 팝업 ===== */
.cs-img-layer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-img-layer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

.cs-img-layer-box {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.cs-img-layer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  font-weight: 700;
  font-size: 0.95rem;
  color: #1f2937;
}

.cs-img-layer-close {
  background: none;
  border: none;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #6b7280;
  font-size: 1rem;
  transition: background 0.15s;
}

.cs-img-layer-close:hover {
  background: #fee2e2;
  color: #dc2626;
}

.cs-img-layer-body {
  overflow: auto;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-img-layer-body img {
  max-width: 100%;
  max-height: calc(90vh - 80px);
  object-fit: contain;
  border-radius: 4px;
}

/* ===== 반응형 ===== */
@media (max-width: 768px) {
  .cs-layout {
    flex-direction: column;
    gap: 1rem;
  }

  .cs-sidemenu-wrap {
    flex: none;
    width: 100%;
  }

  .cs-submenu {
    display: block;
    /* 모바일에서는 항상 펼침 */
  }

  .cs-menu-arrow {
    display: none;
  }

  .cs-content-inner {
    padding: 1.2rem;
  }

  .cs-product-table thead th,
  .cs-product-table tbody td {
    padding: 0.6rem 0.6rem;
    font-size: 0.82rem;
  }
}


/* =================================================================
   마사지업소 소개 사이트 전용 스타일 (MASSEM SHOP STYLES)
================================================================= */

/* ----- 전체 레이아웃 래퍼 ----- */
/* [모바일 중심 고정폭 레이아웃] PC/대형 모니터에서도 마쌤 프론트 콘텐츠 폭을 약 600px로 고정하고 가운데
   정렬한다(마맵 참고). 600px보다 좁은 화면(모바일)에서는 max-width만 걸려있어 기존처럼 width:100%로
   자연스럽게 줄어든다(고정 width가 아니므로 가로 스크롤 없음). 관리자(/_super/)는 이 CSS 파일 자체를
   로드하지 않으므로 영향 없음(코드로 확인 - 어떤 관리자 파일도 theme/cst/css/style.css를 참조하지 않음). */
.shop-wrap {
  min-width: 320px;
  max-width: var(--shop-app-width);
  background: var(--shop-bg);
  margin: 0 auto;
}

/* [81번 - 지도 페이지 document 스크롤 차단] 지도(`/map/`) 화면은 지도/필터/후보/목록시트가 전부 내부
   UI로 동작하므로 페이지 document 자체가 위/아래로 스크롤될 필요가 없다(작업지시서 27/28번). 그런데
   #shop-main{min-height:100vh}와 sticky 헤더가 함께 있으면 문서 전체 높이가 "헤더 자신의 높이 +
   100vh"가 되어 그 차이만큼(대략 헤더 높이)만 스와이프해도 문서 자체가 미세하게 스크롤되는 상태였다
   - 다른 페이지는 콘텐츠가 원래 100vh보다 길어 이 몇십 px가 묻히지만, 지도 페이지는 화면 전체가 이미
   꽉 찬 앱처럼 보이므로 이 미세한 스크롤이 "화면이 위아래로 밀린다"는 체감으로 그대로 드러났다.
   head.php가 map/index.php에서만 정의되는 _MAP_PAGE_ 상수를 보고 .shop-wrap에 이 클래스를 추가로
   붙인다(다른 페이지에는 클래스 자체가 안 붙어 전혀 영향 없음 - 작업지시서 29/37번, 전역 body
   overflow:hidden이 아니라 지도 페이지 전용 class 하나만 사용). position:fixed + top:0/bottom:0은
   100vh와 달리 "레이아웃 뷰포트"에 안정적으로 고정되어 모바일 주소창 애니메이션에도 흔들리지 않는다
   (작업지시서 31번이 제안한 top/bottom inset 방식). 좌우는 기존 .shop-wrap과 동일한 600px 셸
   중앙정렬을 position:fixed 환경에서도 유지하기 위해 #map-bottom-bar 등이 이미 쓰는 것과 같은
   viewport 기준 계산식을 재사용했다. */
.shop-wrap.map-page-active {
  position: fixed;
  top: 0;
  bottom: 0;
  left: max(0px, calc((100vw - var(--shop-app-width)) / 2));
  right: max(0px, calc((100vw - var(--shop-app-width)) / 2));
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

/* ----- 1단+2단 헤더 고정 ----- */
.shop-header {
  position: sticky;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s;
}

.shop-header.scrolled {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.13);
}

/* 1단: 내주변 | 로고 | 검색/메뉴 */
.shop-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--shop-header-h);
  padding: 0 12px;
  max-width: 640px;
  margin: 0 auto;
}

.shop-header-logo img {
  height: 32px;
  display: block;
}

.header-right-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--shop-text);
  font-size: 0.68rem;
  line-height: 1;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}

.header-icon-btn i {
  font-size: 1.7rem;
  color: var(--shop-primary);
}

.header-icon-btn:hover {
  background: var(--shop-primary-light);
  color: var(--shop-primary);
}

.header-icon-btn.is-open i {
  color: var(--shop-accent);
}

/* 검색 패널 슬라이드다운 */
.shop-search-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  background: #fff;
  border-top: 1px solid var(--shop-border);
}

.shop-search-panel.open {
  max-height: 70px;
}

.shop-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  max-width: 640px;
  margin: 0 auto;
}

.shop-search-form input[type=text] {
  flex: 1;
  border: 1.5px solid var(--shop-border);
  border-radius: 24px;
  padding: 8px 16px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}

.shop-search-form input[type=text]:focus {
  border-color: var(--shop-primary);
}

.shop-search-form button {
  background: var(--shop-primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.shop-search-form button:hover {
  background: var(--shop-primary-dark);
}

/* 2단: 지역 버튼 슬라이더 */
.shop-region-bar {
  background: #fff;
  border-top: 1px solid var(--shop-border);
  height: auto;
  /*var(--shop-region-h);*/
  overflow: hidden;
}

.shop-subregion-bar {
  background: var(--shop-primary-light);
  border-bottom: 1px solid #c4b5fd;
  height: auto;
  /* var(--shop-region-h);*/
  overflow: hidden;
}

.shop-region-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px 3px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: 640px;
  margin: 0 auto;
  height: 100%;
}

.shop-region-inner::-webkit-scrollbar {
  display: none;
}

.region-btn {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 0.3rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--shop-text-sub);
  background: #f3f4f6;
  border: 1.5px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s;
  cursor: pointer;
  flex-shrink: 0;
}

.region-btn:hover,
.region-btn.active {
  background: var(--shop-primary);
  color: #fff;
  border-color: var(--shop-primary);
}

.region-btn.sub {
  background: #ede9fe;
  color: var(--shop-primary);
}

.region-btn.sub:hover,
.region-btn.sub.active {
  background: var(--shop-primary);
  color: #fff;
}

/* 2단 메뉴 내 1단 지역(부모) 라벨 표시용 */
.region-btn.top {
  background: #4c1d95;
  /* 좀 더 진한 배경색 (보라계열 다크) */
  color: #fff;
  font-weight: 700;
  cursor: default;
  border-color: #4c1d95;
  box-shadow: 0 2px 6px rgba(76, 29, 149, 0.2);
  border-radius: 8px;
}


.shop-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--shop-border);
}

.shop-filter-inner {
  display: flex;
  gap: 4px;
  padding: 4px 4px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.shop-filter-inner::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 4px;
  border-radius: 0.3rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--shop-text-sub);
  background: #f3f4f6;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: all 0.15s;
  flex-shrink: 0;
}

.filter-chip:hover,
.filter-chip.active {
  background: var(--shop-primary);
  color: #fff;
  border-color: var(--shop-primary);
}

.shop-list-info {
  padding: 10px 14px 0;
  font-size: 0.82rem;
  color: var(--shop-text-sub);
}

.shop-list-info strong {
  color: var(--shop-primary);
  font-weight: 800;
}

.search-keyword {
  color: var(--shop-text);
  font-weight: 600;
}

/* 바텀시트 필터 레이어 스타일 */
.filter-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  display: none;
}

.filter-sheet {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 9999;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  transition: bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

.filter-sheet.open {
  bottom: 0;
}

@media (min-width: 768px) {
  .filter-sheet {
    width: 480px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.filter-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.filter-sheet-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.filter-sheet-footer {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}


/* 메인 컨텐츠 - 헤더가 sticky이므로 상단 패딩 불필요 */
#shop-main {
  padding-bottom: var(--shop-bottom-h);
  min-height: 100vh;
}

/* [81번] #map-page-wrap의 height:calc(100% - ...)가 실제로 자기 부모(#shop-main)의 높이를 기준으로
   계산되는데, #shop-main은 min-height(자동 높이의 하한선일 뿐 "명시된 높이"가 아님)만 갖고 있어
   퍼센트 높이 계산의 기준이 되지 못한다(CSS 스펙상 조상에 명시적 height가 없으면 자식의 height:100%는
   auto로 취급됨) - 그대로 두면 #map-page-wrap이 부모 콘텐츠 크기만큼만 줄어드는 값이 되어버린다.
   지도 페이지(.shop-wrap.map-page-active, 이미 fixed로 실제 뷰포트에 고정된 명시적 높이를 가짐)
   안에서만 #shop-main에 height:100%를 명시해 이 기준을 만들어 준다. padding-bottom(하단 nav 높이만큼
   여백)도 0으로 되돌린다 - #map-page-wrap의 calc()가 이미 --app-bottom-nav-h를 빼고 있어, 여기서
   또 패딩으로 빼면 이중 차감되어 그만큼 빈 여백이 생긴다(작업지시서 32번 - height/bottom 중복 지정
   확인 결과 실제로 있던 중복). 다른 페이지(map-page-active 클래스가 없는 곳)는 이 규칙이 전혀
   적용되지 않아 기존 min-height:100vh + padding-bottom 동작 그대로 유지된다.
   [82번 → 83번 되돌림] 82번은 하단 빈 여백을 없애려고 이 height:100%를 제거하고 #map-page-wrap을
   position:absolute + top/bottom inset 구조로 바꿨으나, 실서버에서 NAVER 지도 타일 자체가 전혀
   표시되지 않는 회귀가 발생했다(작업지시서 83번 - 실기기 확인 결과, 이론적 CSS 검토로는 사전에 확정
   하지 못한 문제). #map-container/#dMap의 height:100%가 "absolute + top/bottom inset으로 얻어진
   암시적 높이"를 상속하는 조합이 실제 모바일 브라우저에서 안정적이지 않았을 가능성이 가장 유력한
   원인으로 추정된다(추정 - 100% 확정 아님). 지도 정상 표시를 최우선으로 82번 이전, 즉 이 height:100%
   방식으로 되돌린다(83번 - 하단 여백 재발은 이번에 허용하고 별도로 다시 다룬다). */
.shop-wrap.map-page-active #shop-main {
  height: 100%;
  min-height: 0;
  padding-bottom: 0;
}

.shop-content-wrap {
  margin: 0 auto;
  padding: 0 1rem;
}

@media (max-width: 600px) {
  .shop-content-wrap {
    padding: 0 0.5rem;
  }
}





/* ----- 드로어 메뉴 ----- */

.drawer-logo {
  height: 28px;
}

.mobile-drawer-header button {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--shop-text-sub);
  padding: 4px;
}

.mobile-btn-login,
.mobile-btn-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

/* ================================================================
   6단: 푸터  (FOOTER PREMIUM REDESIGN)
================================================================ */

#shop-footer {
  background: linear-gradient(180deg, #0d1b2e 0%, #0a1628 100%);
  color: #8fa3bc;
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* 최상단 장식 라인 */
#shop-footer::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--shop-primary) 0%, #38bdf8 50%, var(--shop-primary) 100%);
}

/* ── 정책 링크바 ── */
.footer-policy-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 24px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-policy-bar a {
  font-size: 0.95rem;
  color: #7a9abc;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: color 0.2s;
  white-space: nowrap;
}

.footer-policy-bar a:hover {
  color: #fff;
}

.footer-policy-bar a.highlight {
  font-weight: 700;
  color: #c0d8f0;
}

.footer-sep {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 -10px;
}

/* ── 본문 (로고 + 사업자) ── */
.footer-body {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
  padding: 36px 24px 28px;
}

/* 로고 컬럼 */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
  min-width: 120px;
}

.footer-brand a {
  display: inline-block;
}

.footer-logo-img {
  height: 34px;
  object-fit: contain;
  filter: brightness(1) invert(1) opacity(0.8);
  transition: filter 0.25s;
}

.footer-logo-img:hover {
  filter: brightness(0) invert(1) opacity(1);
}

.footer-tagline {
  font-size: 0.75rem;
  color: #3d6180;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}

/* 세로 구분선 */
.footer-body::before {
  content: '';
  width: 1px;
  min-height: 90px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

/* 사업자 정보 컬럼 */
.footer-biz-block {
  flex: 1;
}

.footer-biz-info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-biz-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #6a8097;
}

.footer-biz-row .biz-label {
  color: #4e6a80;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
  padding: 1px 6px;
  border-radius: 3px;
}

.footer-biz-addr {
  align-items: flex-start;
}

/* ── 하단 카피라이트 ── */
.footer-bottom {
  text-align: center;
  padding: 14px 20px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.87rem;
  color: #93b1d1;
  letter-spacing: 0.5px;
  margin-bottom:60px;
}

/* ── 반응형: 모바일에서 수직 쌓기 ── */
@media (max-width: 600px) {
  .footer-body {
    flex-direction: column;
    gap: 24px;
    padding: 28px 20px 20px;
  }

  .footer-body::before {
    display: none;
  }

  .footer-brand {
    align-items: center;
    width: 100%;
  }

  .footer-tagline {
    text-align: center;
  }

  .footer-biz-row {
    flex-direction: column;
    gap: 2px;
  }

  .footer-policy-bar {
    gap: 8px 14px;
  }
}

/* ----- 7단: 하단 고정 탭바 ----- */
/* [모바일 중심 고정폭 레이아웃] position:fixed라 .shop-wrap의 max-width와 무관하게 원래는 뷰포트 전체
   기준으로 퍼지므로, 이 요소만 따로 --shop-app-width로 맞춰 PC에서도 .shop-wrap과 같은 좌우 경계를 갖게 한다. */
#shop-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 490;
  max-width: var(--shop-app-width);
  height: var(--shop-bottom-h);
  margin: 0 auto;
  background: #fff;
  border-top: 1px solid var(--shop-border);
  display: flex;
  align-items: stretch;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--shop-text-sub);
  font-size: 1rem;
  font-weight: 500;
  transition: color 0.15s;
}

.bottom-nav-item i {
  font-size: 1.2rem;
  transition: transform 0.15s;
}

.bottom-nav-item span {
  white-space: nowrap;
  overflow-x: hidden;
  word-wrap: normal;
  font-size: 0.9rem;
}

.bottom-nav-item:hover,
.bottom-nav-item.active {
  color: var(--shop-primary);
}

.bottom-nav-item.active i {
  transform: scale(1.15);
}

/* .shop-btns (업소 상세페이지 전용 하단 고정 버튼) */
#shop-bottom-nav.shop-btns {
  padding: 10px 16px;
  gap: 10px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  height: auto;
  align-items: center;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  /* 아이폰 하단 대응 */
}

#shop-bottom-nav.shop-btns .bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 52px;
  border-radius: 14px;
  background: #f3f4f6;
  color: #374151;
  font-size: 0.95rem;
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#shop-bottom-nav.shop-btns .bottom-nav-item i {
  font-size: 1.15rem;
  transform: none;
}

/* 주변샵더보기 버튼(79번 - 기존 "지도보기") */
#shop-bottom-nav.shop-btns .bottom-nav-item:nth-child(1) {
  flex: 0.8;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  color: #4b5563;
}

/* [79번] "지도보기"(4자) → "주변샵더보기"(6자)로 문구가 길어져, 이 버튼만 flex:0.8로 다른 두 버튼보다
   좁은 상태에서 글자가 잘릴 위험이 있었다(기본 .bottom-nav-item span의 white-space:nowrap +
   overflow-x:hidden 때문에 넘치면 말줄임 없이 그냥 잘림). 3버튼 전체 디자인/비율은 그대로 두고, 이
   버튼의 글자 크기만 최소로 줄여 잘림을 방지했다(작업지시서 32번 - font-size만 조정). */
#shop-bottom-nav.shop-btns .bottom-nav-item:nth-child(1) span {
  font-size: 0.78rem;
}

#shop-bottom-nav.shop-btns .bottom-nav-item:nth-child(1):hover {
  background: #f9fafb;
}

/* 문자하기 버튼 */
#shop-bottom-nav.shop-btns .bottom-nav-item:nth-child(2) {
  background: #eff6ff;
  color: #3b82f6;
}

#shop-bottom-nav.shop-btns .bottom-nav-item:nth-child(2):hover {
  background: #dbeafe;
}

/* 전화걸기 버튼 (Primary) */
#shop-bottom-nav.shop-btns .bottom-nav-item:nth-child(3) {
  flex: 1.2;
  background: var(--shop-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

#shop-bottom-nav.shop-btns .bottom-nav-item:nth-child(3) i {
  animation: ring 2s infinite ease-in-out;
}

#shop-bottom-nav.shop-btns .bottom-nav-item:active {
  transform: scale(0.95);
}

@keyframes ring {

  0%,
  100% {
    transform: rotate(0deg);
  }

  10%,
  30%,
  50% {
    transform: rotate(15deg);
  }

  20%,
  40% {
    transform: rotate(-15deg);
  }

  60% {
    transform: rotate(0deg);
  }
}

.bottom-nav-item.nav-my-location {
  position: relative;
  top: -15px;
  flex: none;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: var(--shop-primary, #ff5b5b);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  justify-content: center;
  align-items: center;
}

.bottom-nav-item.nav-my-location img {
  width: 2.2rem;
  filter: brightness(0) invert(1);
}

.bottom-nav-item.nav-my-location span {
  color: #fff;
  margin-top: 2px;
}

.bottom-nav-item.nav-my-location:hover,
.bottom-nav-item.nav-my-location.active {
  color: #fff;
  transform: scale(1.05);
}

/* [사이트 이미지 관리] 관리자가 등록한 사용자 지정 이미지용 최소 클래스 (기존 선택자/레이아웃 값은 변경하지 않음) */
.site-custom-tab-icon,
.site-custom-section-icon {
  height: 1em;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}

/* 내주변(fico3) 기본 이미지에 적용되는 흰색 반전 필터를 사용자 지정 이미지에는 적용하지 않음 */
.bottom-nav-item.nav-my-location img.site-custom-nav-image {
  filter: none;
}

/* ----- 샾 카드 (타일) ----- */
.shop-card {
  transition: transform 0.2s, box-shadow 0.2s;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.shop-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: 0.2s;
}

.shop-card-img {
  aspect-ratio: 4/3;
  display: block;
  background: #ede9fe;
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.shop-card-img-placeholder {
  aspect-ratio: 4/3;
  width: 100%;
  height: 160px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #d1d5db;
}

.shop-card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.shop-card.horizontal .shop-card-body {
  padding: 0rem;
}

.shop-card-name {
  margin-bottom: 4px;
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0.5rem 0;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--shop-text-sub);
}

.shop-card-price {
  font-size: 1.2rem;
  font-weight: 800;
  color: #e11d48;
}

.shop-card-stats {
  align-items: center;
  margin-top: auto;
  padding-top: 0.8rem;
  display: flex;
  gap: 10px;
  font-size: 0.85rem;
  color: #6b7280;
  border-top: 1px solid #f3f4f6;
}

.shop-card-stats i {
  font-size: 0.75rem;
}

/* 찜하기 버튼 */
.btn-scrap {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: all 0.2s;
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #ccc;
  cursor: pointer;
  z-index: 2;
}

.btn-scrap:hover,
.btn-scrap.active {
  color: #ef4444;
  background: #fff;
}

.btn-scrap.active i {
  font-weight: 900;
}

/* 샾 태그 (카테고리) */
.shop-tag {
  align-items: center;
  background: #fdf2f8;
  color: #be185d;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  display: inline-block;
}

/* 추천 배지 */
.shop-recommend-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #eab308;
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 12px;
  z-index: 2;
}

/* [내주변 지도/목록 영업상태 통합] 영업중(+프리미엄)/영업종료/unknown 배지 - render_shop_card() 공용 */
.shop-status-badge {
  position: static;
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  line-height: 1.5;
}

.shop-status-badge.status-premium-open {
  background: #38bdf8;
  color: #ffffff;
}

.shop-status-badge.status-open {
  background: #ffffff;
  color: #16a34a;
  border: 1px solid #16a34a;
}

.shop-status-badge.status-closed {
  background: #6b7280;
  color: #ffffff;
}

.shop-status-badge.status-unknown {
  background: #e5e7eb;
  color: #6b7280;
}

/* 영업종료 카드는 살짝 흐리게(opacity)만 낮춰 눈에 덜 띄게 한다 - 카드 레이아웃/크기는 그대로 */
.shop-card.shop-card-closed {
  opacity: 0.72;
}

/* [내주변 지도 - 영업 준비중 표시] 카드 전체가 아니라 대표이미지 위에만 덮이는 오버레이(render_shop_card, map_shop_popup.php 공용).
   카드 배경/글자/가격/거리 등 나머지 요소는 전혀 어두워지지 않는다. */
.shop-thumb-closed-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #ffffff;
  text-align: center;
  padding: 4px;
  pointer-events: none;
  z-index: 5;
}

.shop-thumb-closed-label {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
}

.shop-thumb-closed-time {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.9;
  line-height: 1.2;
}

/* 가로형 100×100 썸네일(제휴샵/목록/지도 목록 View/찜)처럼 작은 이미지에서는 글자를 살짝 줄인다 */
.shop-thumb-closed-overlay-sm .shop-thumb-closed-label {
  font-size: 0.68rem;
}

.shop-thumb-closed-overlay-sm .shop-thumb-closed-time {
  font-size: 0.62rem;
}

/* ----- 섹션 타이틀 ----- */
.shop-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  margin-bottom: 1rem;
}

.shop-section-title h2 {
  color: var(--shop-text);
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
}

.shop-section-more {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  color: #666;
}

/* ----- 카테고리 원형 버튼 ----- */
.category-swiper-wrap {
  width: 100%;
  margin: 0 auto;
  padding: 1rem 16px 16px;
  overflow: hidden;
  max-width: 1200px;
}

.category-item {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  display: block;
  text-decoration: none;
}

.category-circle {
  transition: border-color 0.2s, transform 0.2s;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: #fdf2f8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem auto;
  overflow: hidden;
  border: 1px solid #fbcfe8;
}

.category-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-circle-icon {
  font-size: 1.8rem;
  color: #be185d;
}

.category-item:hover .category-circle,
.category-item.active .category-circle {
  border-color: var(--shop-primary);
  transform: scale(1.08);
}

.category-label {
  white-space: nowrap;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.1rem;
  color: #374151;
  font-weight: 500;
}

.category-item.active .category-label {
  color: var(--shop-primary);
}

@media (max-width: 575px) {
  .category-swiper-wrap .category-circle {
    width: 4rem;
    height: 4rem;
  }

  .category-swiper-wrap .category-label {
    font-size: 0.9rem;
  }
}

/* ----- 샾 목록 그리드 ----- */
.shop-list-grid {
  padding: 0 12px 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 0;
}

@media (min-width: 640px) {
  .shop-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .shop-content-wrap {
    max-width: 768px;
  }

  .shop-header-top,
  .shop-region-inner,
  .shop-search-form {
    max-width: 768px;
  }
}

@media (min-width: 900px) {
  .shop-content-wrap {
    max-width: 1024px;
  }

  .shop-header-top,
  .shop-region-inner,
  .shop-search-form {
    max-width: 1024px;
  }
}

@media (min-width: 1024px) {
  .shop-list-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .shop-content-wrap {
    max-width: 1280px;
  }

  .shop-header-top,
  .shop-region-inner,
  .shop-search-form {
    max-width: 1280px;
  }
}

@media (max-width: 640px) {
  .shop-list-grid {
    padding: 0;
  }

}

/* ----- Swiper 커스텀 ----- */
.shop-swiper-wrap {
  padding: 0 0 16px;
}

.shop-swiper,
.review-swiper {
  padding-bottom: 24px !important;
  position: relative;
}

.shop-swiper .swiper-slide {
  width: 180px;
}

@media (min-width: 480px) {
  .shop-swiper .swiper-slide {
    width: 200px;
  }
}

@media (min-width: 640px) {
  .shop-swiper .swiper-slide {
    width: 220px;
  }
}

.shop-swiper .swiper-pagination,
.review-swiper .swiper-pagination,
.shop-swiper-pagination,
.review-swiper-pagination {
  bottom: 0 !important;
  left: 0;
  width: 100%;
}

.shop-swiper-pagination .swiper-pagination-bullet-active,
.review-swiper-pagination .swiper-pagination-bullet-active {
  background: var(--shop-primary);
}

/* ----- 샾 상세 (/contents/shop_detail.php) ----- */
.shop-detail-slider {
  position: relative;
}

.shop-detail-slider img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.shop-detail-tab-bar {
  display: flex;
  background: #fff;
  border-bottom: 2px solid var(--shop-border);
  position: sticky;
  top: var(--shop-header-total);
  z-index: 100;
}

.shop-detail-tab {
  flex: 1;
  text-align: center;
  padding: 12px 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--shop-text-sub);
  text-decoration: none;
  border-bottom: 2.5px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  cursor: pointer;
}

.shop-detail-tab.active,
.shop-detail-tab:hover {
  color: var(--shop-primary);
  border-bottom-color: var(--shop-primary);
}

.shop-detail-tab-content {
  padding: 16px;
  display: block;
}

/* 업소 기본정보 */
.shop-info-header {
  padding: 16px;
  background: #fff;
  border-bottom: 1px solid var(--shop-border);
}

.shop-info-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--shop-text);
  margin-bottom: 4px;
}

.shop-info-tag-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.shop-info-action-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.btn-shop-scrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 24px;
  border: 1.5px solid var(--shop-border);
  background: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--shop-text-sub);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-shop-scrap.active,
.btn-shop-scrap:hover {
  border-color: #ef4444;
  color: #ef4444;
}

.btn-shop-call {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 24px;
  background: var(--shop-primary);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s;
}

.btn-shop-call:hover {
  background: var(--shop-primary-dark);
}

/* 코스 목록 */
.course-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--shop-border);
}

.course-name {
  font-weight: 700;
  font-size: 0.95rem;
}

.course-time {
  font-size: 0.8rem;
  color: var(--shop-text-sub);
  margin-top: 2px;
}

.course-price {
  font-size: 1.05rem;
  font-weight: 800;
  word-break: keep-all;
  white-space: nowrap;
  color: var(--shop-primary);
}

/* 관리사 카드 */
.manager-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--shop-border);
}

.manager-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--shop-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.manager-avatar-icon {
  font-size: 1.6rem;
  color: var(--shop-primary);
}

.manager-name {
  font-weight: 700;
  font-size: 0.95rem;
}

.manager-info {
  font-size: 0.8rem;
  color: var(--shop-text-sub);
  margin-top: 2px;
}

/* 리뷰 카드 */
/* [리뷰 가독성 보완 2차 - 마맵 참고화면 수준] 사이트의 html 기본 font-size가 뷰포트에 따라 유동적으로
   변하는 구조(약 12.9~16px)라 rem 단위로는 목표 px 크기가 화면 폭에 따라 흔들릴 수 있어, 이번 라운드의
   리뷰 타이포그래피 selector는 목표 px 값을 직접 고정한다(업소상세 리뷰 전용 selector만 대상 - 전역
   body/p/span/img나 html font-size 자체는 건드리지 않음, 다른 페이지 글자 크기에 영향 없음). */
.review-card {
  padding: 20px 0;
  border-bottom: 1px solid var(--shop-border);
}

.review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 4px;
  margin-bottom: 12px;
}

.review-author {
  font-weight: 700;
  font-size: 16px;
  overflow-wrap: anywhere; /* [모바일 대응] 긴 닉네임이 카드 밖으로 넘치지 않고 자연스럽게 줄바꿈되도록 */
}

/* [리뷰 - 프로필 아바타] 실제 인물 사진 대신 닉네임 해시 기반 이모지+배경색 원형 아바타(마맵 스타일).
   리뷰 아바타 전용 클래스이며 사이트 전역 테마에는 영향을 주지 않는다. */
.review-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 8px;
}

.review-date {
  font-size: 13px;
  color: var(--shop-text-sub);
}

.review-rating {
  color: var(--shop-accent);
  font-size: 16px;
}

.review-merit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.review-merit-tag {
  background: var(--shop-primary-light);
  color: var(--shop-primary);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 12px;
}

.review-content {
  font-size: 15.5px;
  color: var(--shop-text);
  line-height: 1.6;
}

/* [리뷰 페이지네이션] 기존 사이트 공통 pg_wrap/pg_page/pg_current(theme/cst/css/default.css)를 그대로
   재사용하고, 리뷰 목록과의 간격만 이 wrapper에서 추가한다. */
.review-pagination-wrap {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

/* [이런 점이 좋았어요 - compact 카드형] 기존의 폭 전체를 쓰는 긴 가로 그래프를, 폭이 제한된 compact
   카드 + 짧은 그래프 + 접기/펼치기 구조로 바꾼다(리뷰 목록 위 기존 위치는 그대로 유지). 카드 자체 폭만
   제한하므로 넓은 PC 화면에서도 그래프가 페이지 전체 너비로 늘어나지 않는다. */
.review-merit-summary {
  width: 100%;
  max-width: 600px;
  margin-bottom: 18px;
  padding: 20px;
  background: #f8f7ff;
  border: 1px solid #ece9fb;
  border-radius: 16px;
  box-sizing: border-box;
}

.review-merit-summary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.review-merit-summary-head h3 {
  font-size: 15px;
  font-weight: 800;
  margin: 0;
}

.review-merit-summary-participants {
  font-size: 12.5px;
  color: var(--shop-text-sub);
  flex-shrink: 0;
  white-space: nowrap;
}

.review-merit-summary-participants-num {
  color: #2563eb;
}

/* [접기 높이 - CSS class 기반] 행 높이를 38px로 고정해 "4행 전부 + 5행째 절반"이 정확히
   38*4 + 19 = 171px 안에 들어오도록 계산했다(JS로 픽셀을 계산하지 않음). */
.review-merit-summary-list {
  position: relative;
}

.review-merit-summary-list.is-collapsed {
  max-height: 171px;
  overflow: hidden;
}

.review-merit-summary-list.is-collapsed::after {
  /* [페이드 높이 보정] 접힌 상태에서 실제로 보이는 5번째 행의 높이는 19px(행 높이 38px의 절반)뿐이다.
     이전 값(34px)은 그보다 커서 4번째 행 하단까지 15px 침범해 4번째 행이 흐려지고, 5번째 행은
     시작과 거의 동시에 가려져 "부드럽게 흐려짐" 없이 뚝 끊긴 것처럼 보였다. 1~4번째 행(0~152px)은
     전혀 건드리지 않도록 페이드 높이를 5번째 행의 보이는 영역(152~171px)과 정확히 맞춘다. */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 19px;
  background: linear-gradient(to bottom, rgba(248, 247, 255, 0), #f8f7ff 90%);
  pointer-events: none;
}

.review-merit-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
}

.review-merit-summary-label {
  flex: 1 1 130px;
  min-width: 70px;
  max-width: 180px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-merit-summary-bar-track {
  flex: 2 1 100px;
  max-width: 220px;
  min-width: 50px;
  height: 13px;
  background: #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.review-merit-summary-bar-fill {
  display: block;
  height: 100%;
  background: var(--shop-primary);
  border-radius: 8px;
}

.review-merit-summary-num {
  flex: 0 0 28px;
  width: 28px;
  text-align: right;
  font-weight: 700;
  color: var(--shop-primary);
  font-size: 13px;
}

.review-merit-summary-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 6px;
  padding: 6px 0 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--shop-text-sub);
  font-size: 14px;
}

.review-merit-summary-toggle .fa-chevron-down {
  transition: transform 0.2s;
}

.review-merit-summary-toggle.is-open .fa-chevron-down {
  transform: rotate(180deg);
}

/* 리뷰 작성 폼 */
.review-write-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: var(--shop-primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  justify-content: center;
  margin-bottom: 16px;
  transition: background 0.2s;
}

.review-write-btn:hover {
  background: var(--shop-primary-dark);
}

/* 장점 멀티 선택 */
.merit-check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.merit-check-item {
  position: relative;
}

.merit-check-item input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.merit-check-item label {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--shop-border);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--shop-text-sub);
  background: #fff;
}

.merit-check-item input:checked+label {
  background: var(--shop-primary);
  color: #fff;
  border-color: var(--shop-primary);
}


@media (max-width: 576px) {
  .shop-info-header {
    padding: 10px;
  }

  .shop-detail-tab-content {
    padding: 10px;
  }
}



/* ----- 마이페이지 카드 ----- */
.mypage-stat-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.07);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mypage-stat-value {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--shop-primary);
  line-height: 1;
}

.mypage-stat-label {
  font-size: 0.78rem;
  color: var(--shop-text-sub);
  font-weight: 600;
}

.mypage-stat-sub {
  font-size: 0.75rem;
  color: var(--shop-text-sub);
}

.mypage-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 16px;
}

@media (min-width: 640px) {
  .mypage-stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 점프하기 버튼 */
.btn-jump {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--shop-primary), #38bdf8);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  justify-content: center;
  margin: 0 16px 16px;
  width: calc(100% - 32px);
  transition: opacity 0.2s, transform 0.15s;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
}

.btn-jump:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.btn-jump:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ----- 업소 등록 폼 ----- */
.shop-form-section {
  background: #fff;
  border-radius: 16px;
  padding: 20px 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.shop-form-section-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--shop-text);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--shop-primary-light);
  display: flex;
  align-items: center;
  gap: 8px;
}

.shop-form-section-title i {
  color: var(--shop-primary);
}

/* ----- 페이징 ----- */
.shop-paging {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px 0;
}

.shop-paging a,
.shop-paging span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--shop-text-sub);
  border: 1.5px solid var(--shop-border);
  background: #fff;
  transition: all 0.15s;
}

.shop-paging a:hover {
  background: var(--shop-primary-light);
  color: var(--shop-primary);
  border-color: var(--shop-primary);
}

.shop-paging .active-page {
  background: var(--shop-primary);
  color: #fff;
  border-color: var(--shop-primary);
}

/* ================================================================
   지도 페이지 (map/index.php) - 마사지 업소 전용 리빌드
================================================================ */

/* ── 맵 전체 컨테이너 ── */
/* [80번 - 모바일 주소창 변화 대응, 81번 재설계] 80번은 100vh 기반 calc()가 모바일 주소창 변화에
   어긋난다는 문제를 visualViewport 실측으로 보완하려 했으나 흔들림이 재발했다(위 .shop-wrap.
   map-page-active 주석 참고 - 서로 다른 뷰포트 좌표계를 섞은 것이 원인으로 추정). 이번에는 100vh를
   아예 쓰지 않는다: 부모 `.shop-wrap.map-page-active`가 이미 position:fixed; top:0; bottom:0;으로
   실제 뷰포트에 안정적으로 고정돼 있으므로, #map-page-wrap은 그 부모의 100%(퍼센트, vh 아님)에서
   header/bottom-nav "자기 자신의 높이"(head.php의 syncAppViewportOffsets()가 매번 측정)만큼만 뺀다.
   두 값 모두 주소창 애니메이션과는 무관하게 검색 row 열림/닫힘 등 실제 내용 변화가 있을 때만 바뀐다.
   [82번 → 83번 되돌림] 82번은 이 relative+calc(height) 구조를 "position:absolute + top/bottom
   inset" 구조로 바꿔 하단 빈 여백을 없애려 했으나, 실서버에서 NAVER 지도 타일이 전혀 표시되지 않는
   회귀가 발생했다(작업지시서 83번). #map-container/#dMap의 height:100%가 absolute+inset으로 얻은
   암시적 높이를 안정적으로 상속하지 못했을 가능성이 가장 유력한 원인으로 추정된다(추정). 지도 정상
   표시가 최우선이므로 81번에서 실제 정상 동작이 확인된 이 구조로 되돌린다 - 하단 빈 여백이 다시
   생기는 것은 이번에 허용하고, 지도 정상 복구를 서버에서 재확인한 뒤 별도로 다시 다룬다. */
#map-page-wrap {
  position: relative;
  width: 100%;
  height: calc(100% - var(--app-bottom-nav-h, var(--shop-bottom-h)) - var(--app-header-h, var(--shop-header-h)));
  background: #f0f4ff;
  /* [68번] #map-list-view(목록 bottom sheet)가 닫힘 상태(translateY(100%))일 때 셸 아래로 완전히 가려지도록 클리핑한다. */
  overflow: hidden;
}

#map-container {
  position: relative;
  width: 100%;
  height: 100%;
}

#dMap {
  width: 100%;
  height: 100%;
}

/* ── 검색/필터 패널 (지도 위 절대 위치) ── */
/* [71번 - 배경 반투명화 재조정 3차] 70번에서 0.3→0.2, blur 12px→5px로 낮췄지만 실제 화면에서는 여전히
   충분히 투명하지 않았다. DOM/레이어 구조를 다시 확인했으나(67번부터 그대로) 패널 바로 뒤에는 여전히
   실제 지도(#dMap)가 있고, #map-search-panel을 재선언/오버라이드하는 다른 selector나 ::before/::after도
   없었다 - 구조 문제가 아니라는 결론은 69/70번과 동일하다. box-shadow(0 4px 24px rgba(59,130,246,0.15),
   0 1px 4px rgba(0,0,0,0.08))도 다시 확인했지만 파란색/검정색 저알파 그림자라 흰색으로 보이는 원인이
   될 수 없어 이번에도 값을 바꾸지 않았다. 남은 원인은 backdrop-filter의 blur 자체였다 - blur는 값이
   아무리 작아도 그 아래 지도 이미지의 선명한 경계(도로선/글자 등)를 평균내어 부드럽게 뭉개므로, 낮은
   alpha와 함께 있으면 "흐릿하고 밝은 안개" 인상을 강하게 만든다. 이번에는 blur를 완전히 제거하고
   background 알파도 0.2→0.1로 더 낮췄다 - 그 결과 지도가 blur 없이 원래 선명도 그대로 얇은 흰 막
   너머로 비친다. 부모 전체 opacity는 이번에도 사용하지 않았다(버튼/select/드롭다운은 각자 불투명한
   자기 배경을 그대로 가짐). */
#map-search-panel {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 50;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 12px 14px 10px;
  box-shadow: 0 4px 24px rgba(59, 130, 246, 0.15), 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  max-width: 560px;
}

/* [81번 - 후보 dropdown 열림 중 필터바 숨김] #map-search-candidates(투명 배경 유지, 25번)가 열려 있는
   동안 뒤의 실시간예약/국적/업종/초기화 필터바(#map-search-panel)가 후보 pill과 겹쳐 보이는 문제를
   해결한다. display:none을 쓰지 않고 visibility/opacity/pointer-events만 바꿔(작업지시서 22번) 필터가
   차지하던 레이아웃 공간(#map-page-wrap의 자식 순서/높이)은 그대로 유지시켜 화면이 다시 튀지 않게
   한다. #map-search-panel에 이미 있던 transition:all 0.3s ease를 그대로 재사용해 부드럽게 사라진다. */
#map-page-wrap.search-candidates-open #map-search-panel {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 640px) {
  #map-search-panel {
    left: 16px;
    top: 16px;
    right: auto;
    width: 360px;
  }
}

.map-search-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.map-logo {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--shop-primary);
}

#map-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#map-search-panel.panel-collapsed #map-filter-row {
  display: none;
}

.map-filter-select {
  flex: 1;
  min-width: 100px;
  padding: 6px 8px;
  border: 1.5px solid var(--shop-border);
  border-radius: 8px;
  font-size: 0.78rem;
  background: #fff;
}

/* [70번 - 초기화 버튼 고정 노출] 국적/업종을 선택하면 라벨이 "한국"/"스웨디시"처럼 길어지는데, 기존에는
   이 줄이 overflow-x:auto(가로 스크롤)이고 모든 버튼이 flex-shrink:0이라 늘어난 만큼 초기화 버튼이
   화면 밖으로 밀려나 스크롤해야만 보였다. 더 이상 가로 스크롤에 의존하지 않고, 국적/업종 버튼만 남는
   공간 안에서 줄어들도록(아래 #btn-nationality-toggle/#btn-category-toggle 규칙) 바꿔 초기화가 항상
   한 화면 안에 완전히 보이게 한다. */
.map-quick-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: hidden;
  padding-bottom: 2px;
}

.btn-my-loc,
.btn-panel-toggle,
.map-quick-filter-btn {
  background: var(--shop-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* [70번] 국적/업종만 예외적으로 줄어들 수 있게 한다(위 공용 규칙의 flex-shrink:0을 ID 선택자로 재정의).
   min-width:0이 있어야 flex item이 내용 너비보다 작게 줄어들 수 있고, 아이콘은 flex-shrink:0으로 고정해
   글자만 줄어들며 말줄임되게 한다.
   [71번] flex-grow:1을 추가해 초기화 글자를 없애 확보된 남는 공간을 국적/업종이 나눠 가져가게 했다
   (필터아이콘/실시간예약/초기화 아이콘은 flex-grow 없이 내용 크기만큼만 차지 - 위 공용 규칙 그대로).
   덕분에 "한국"/"스웨디시"처럼 짧고 흔한 값은 "국"/"업"으로 잘리지 않고 대부분 전체 표시되고,
   "스파/사우나"처럼 정말 긴 값만 필요할 때 말줄임된다. */
#btn-nationality-toggle,
#btn-category-toggle {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

#btn-nationality-toggle i,
#btn-category-toggle i {
  flex-shrink: 0;
}

#nationality-btn-label,
#category-btn-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* [실서버 오류 수정] 바로 위 공용 규칙(.btn-my-loc,.btn-panel-toggle,.map-quick-filter-btn)과 이 선택자의
   CSS 명시도가 같아, 파일 순서상 나중에 오는 이 규칙이 항상 이겨 실시간예약/국적/업종 3개 버튼만 흰색으로
   보이고 [필터]만 파란 버튼으로 보이던 원인이었다. 4개 버튼 전부 같은 파란 계열로 통일하기 위해
   기본 상태 흰색 재정의를 제거하고, 실시간예약 ON일 때만 더 짙은 파란색으로 강조한다. */
.map-quick-filter-btn.active {
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
}

/* [실서버 오류 수정 - 동네명 검색칸 UI] 일반 텍스트였던 것을 검색칸처럼 보이는 회색 둥근 박스로 변경.
   클릭하면 기존 돋보기와 동일한 toggleSearchPanel()을 호출한다(새 검색 UI 아님, head.php onclick 참고). */
.map-neighborhood-name {
  flex: 1;
  min-width: 0;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--shop-text);
  background: #f3f4f6;
  border-radius: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 14px;
  margin: 0 6px;
  cursor: pointer;
}

/* [내주변 지도 상단 필터 재배치] 국적/업종 바텀시트 옵션 목록 - 기존 filter-sheet 구조 재사용, 목록 스타일만 최소 추가 */
.map-option-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.map-option-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--shop-border);
  background: #fff;
  font-size: 0.9rem;
  color: var(--shop-text);
  cursor: pointer;
}

.map-option-item.active {
  background: var(--shop-primary-light);
  color: var(--shop-primary);
  border-color: var(--shop-primary);
  font-weight: 700;
}

.map-option-flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}

/* [국적/업종 드롭다운 전환] 버튼 바로 아래에 뜨는 작은 드롭다운 - 기존 전체화면 바텀시트(.filter-sheet/.filter-sheet-overlay) 대체.
   .map-quick-filter-bar가 overflow-x:auto라 그 안에 두면 잘리므로 position:fixed로 뷰포트 기준 배치하고,
   좌표(top + left 또는 top + right)는 script.map.js의 positionDropdownUnderButton()이 버튼 위치를 계산해 매번 지정한다. */
.map-quick-dropdown {
  display: none;
  position: fixed;
  z-index: 200;
  min-width: 160px;
  max-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--shop-border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  padding: 6px;
}

.map-quick-dropdown.open {
  display: block;
}

.map-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  /* 모바일 터치 영역 확보 */
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  border: none;
  background: #fff;
  font-size: 0.92rem;
  color: var(--shop-text);
  cursor: pointer;
}

.map-dropdown-item:hover {
  background: var(--shop-primary-light);
}

.map-dropdown-item.active {
  background: var(--shop-primary-light);
  color: var(--shop-primary);
  font-weight: 700;
}

/* 국적 드롭다운 국기 - 기존 .map-option-flag(20x14, object-fit:cover로 잘라냄)와 달리
   height:auto로 실제 svg 종횡비를 그대로 유지한다(요청사항: 실제 이미지 비율 보존). */
.map-dropdown-flag {
  width: 26px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* [67번 - 업종 필터 원형 테마 이미지] 관리자 "업소 테마 관리"(category_setup.php)의 원형 미리보기(50px)와 같은 이미지를
   드롭다운 항목 높이(min-height:40px)에 맞춰 더 작은 원형 썸네일로 재사용한다. 이미지가 없는 테마는 관리자 화면과
   동일한 대체 표시(연보라 원 + 업종명 첫 글자)를 쓴다 - 깨진 이미지 아이콘 없이 항상 원형 자리표시가 유지된다. */
.map-dropdown-theme-img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.map-dropdown-theme-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ede9fe;
  color: #7c3aed;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* [73번 - 지도 검색 후보 패널] "동일 지역명"/"동일 업소명"이 여러 곳일 때 검색창 바로 아래에 뜨는
   거리순 후보 목록. #map-quick-dropdown(국적/업종 드롭다운)과 같은 position:fixed 오버레이 기법을
   그대로 재사용하고(작업지시서 6번 - 지도가 아래로 밀리지 않게), 좌우 폭은 #map-bottom-bar와 동일한
   계산식으로 600px 셸 안에 맞춘다(작업지시서 25/28번 - 셸 밖으로 튀어나오지 않게). top만 script.map.js가
   #map-search-panel의 실제 렌더 위치를 읽어 매번 지정한다.
   [76번 - 배경 투명도 1차 수정] 기존 완전 불투명 흰 배경(#fff)이 뒤 지도를 거의 가려 실서버에서 "너무
   진하다"는 피드백을 받아 rgba(255,255,255,0.14)+blur(6px)로 낮췄었다.
   [77번 - 배경 투명도 2차 수정] blur(6px)가 지도 타일을 뿌옇게 만든다는 재확인 피드백을 받아
   rgba(255,255,255,0.06)까지 더 낮추고 blur를 제거했었다.
   [78번 - 배경 다시 불투명 흰색으로] 77번까지 낮춘 결과 실제 화면에서 "'강남' 지역이 전국에 4곳
   있어요!" 같은 제목/후보 목록 전체가 지도·필터와 섞여 거의 안 보이는 문제가 발생해, 거의 불투명한
   흰 배경(#fff)으로 되돌렸었다.
   [80번 - 다시 투명 배경 + 테두리만] 사용자 요청이 다시 "배경은 투명하게, 테두리만 보이게"로 바뀌어
   적용한다. 78번의 "제목이 안 보이던" 문제는 배경을 없애는 대신 제목 자체의 색을 진하게 하고 옅은
   흰색 text-shadow(글자 뒤에 사각 배경을 까는 것이 아니라 글자 윤곽만 밝게 감싸는 halo 효과)로
   해결해, 배경이 투명해도 지도 위에서 읽히게 했다. 테두리는 var(--shop-border)(#e5e7eb)가 지도
   위에서는 너무 옅어 거의 안 보일 수 있어, 후보 pill과 같은 어두운 톤(15,17,23 - 76번 pill 배경과
   동일 계열)의 반투명 테두리로 바꿔 밝은/어두운 지도 타일 모두에서 어느 정도 구분되게 했다. blur/
   backdrop-filter는 추가하지 않는다. */
#map-search-candidates {
  display: none;
  position: fixed;
  z-index: 200;
  left: max(12px, calc((100vw - var(--shop-app-width)) / 2 + 12px));
  right: max(12px, calc((100vw - var(--shop-app-width)) / 2 + 12px));
  max-height: 50vh;
  overflow-y: auto;
  background: transparent;
  border: 1px solid rgba(15, 17, 23, 0.28);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  padding: 10px;
}

#map-search-candidates.open {
  display: block;
}

/* [80번] 배경이 투명해도 제목이 읽히도록 글자색을 진하게 하고, 사각 배경 대신 옅은 흰색 halo
   (text-shadow)만 둘러 지도 위에서 대비를 만든다(작업지시서 50번 - 제목 뒤 흰 배경 금지). */
.map-search-candidate-title {
  font-size: 0.78rem;
  color: #1f2937;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85), 0 0 5px rgba(255, 255, 255, 0.7);
  padding: 2px 4px 8px;
}

/* [75번] 후보 버튼들을 감싸는 flex 컨테이너 - width:auto pill들이 짧으면 옆으로, 길면(대부분의
   전체 지역경로명) 자연스럽게 다음 줄로 넘어간다(작업지시서 5번 - flex-wrap, 가로 스크롤 없음). */
.map-search-candidate-list {
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
}

/* [75번 - 하단 "N곳 표시중"/"목록보기" 배지와 같은 계열로 재디자인] 기존 흰색 카드형을 버리고,
   #map-result-badge(style.css:11485 부근, 이 규칙 자체는 이번에도 수정하지 않음 - 값만 참고해
   재사용)와 동일한 어두운 반투명 pill로 통일했다. width:100%로 패널 전체 폭을 억지로 채우던 것도
   제거해(작업지시서 5번) 내용 길이만큼만 차지하는 자연스러운 pill이 되었다.
   [76번 - 배경 완화 1차] rgba(15,17,23,0.82)는 "목록보기" 버튼(map/index.php의 $map_list_bg, 기본값
   rgba(34,34,34,0.82))보다 더 검고 짙어 보인다는 실서버 피드백을 받아, 색상(34,34,34)은 목록보기
   버튼과 맞추고 알파값만 0.82→0.6으로 낮췄었다.
   [77번 - "목록보기와 같은 투명도로" 재수정] 76번은 색상 톤만 맞추고 알파값(0.6)은 목록보기의 실제
   기본값(0.82, map/index.php $map_list_opacity 기본 82)과 달랐다는 재확인 피드백을 받아, 알파값도
   0.82로 동일하게 맞췄다 - "목록보기와 똑같은 배경"이 목표이므로 새 값을 만들지 않고 그대로 재사용.
   모서리 둥글기/버튼형 구조/blur(8px)는 그대로 유지. */
.map-search-candidate-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  max-width: 100%;
  text-align: left;
  padding: 7px 16px;
  border-radius: 20px;
  border: none;
  background: rgba(34, 34, 34, 0.82);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

/* [75번] 선택 시 버튼 전체를 진한 파랑으로 덮지 않는다(거리 숫자의 파란색이 묻혀 안 보이는 문제 방지) -
   같은 어두운 배경을 유지한 채 파란 outline(box-shadow 링)만 더해 "선택됨"을 표시한다. */
.map-search-candidate-btn.active {
  box-shadow: 0 0 0 2px var(--shop-primary), 0 2px 10px rgba(0, 0, 0, 0.18);
}

.map-search-candidate-label {
  min-width: 0;
  color: #fff;
}

/* [76번 - 검색 키워드 하이라이트] 후보 라벨 안에서 사용자가 입력한 검색어와 일치하는 부분만 거리
   숫자(.map-search-candidate-distance-num)와 동일한 파란색(#60a5fa)으로 표시한다(작업지시서 3번).
   새 색상을 만들지 않고 기존 파란색을 재사용해 "숫자든 텍스트든 강조는 같은 파란색" 톤을 유지한다. */
.map-search-candidate-highlight {
  color: #60a5fa;
  font-weight: 800;
}

/* [75번] "이름 ·············· 33.8km"처럼 양끝으로 벌어지던 justify-content:space-between/
   margin-left:auto 구조를 완전히 제거했다 - 버튼이 이제 width:auto(내용 길이만큼)라 이름 바로
   뒤에 거리가 붙는다. 거리 숫자만 파란색(#map-result-badge .badge-count와 동일한 #60a5fa)으로
   구분한다(작업지시서 6번) - 단위(km/m)는 일반 흰색 텍스트로 남긴다. */
.map-search-candidate-distance {
  display: inline-flex;
  align-items: baseline;
  flex-shrink: 0;
  white-space: nowrap;
}

.map-search-candidate-distance-num {
  color: #60a5fa;
  font-size: 14px;
  font-weight: 800;
}

.map-search-candidate-distance-unit {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

/* [내주변 지도 하단 버튼 레이아웃 수정] 이전에는 #map-result-badge가 flex:1로 남는 공간을 전부 차지해 지나치게
   넓어 보였고, #btn-map-list-toggle도 flex 정렬상 화면(및 하단 네비 "내 주변" 아이콘) 정중앙과 어긋났다.
   이제 #map-bottom-bar 자체는 좌우 위치만 잡는 컨테이너(높이만 지정)로 두고, 좌/중/우 3개 자식을 각각
   absolute로 좌측 끝/화면 정중앙/우측 끝에 고정한다(자식별 규칙은 아래 #map-result-badge, #btn-map-list-toggle,
   .btn-my-loc-round 참조). display:flex와 justify-content:space-between은 더 이상 쓰지 않는다. */
/* [모바일 중심 고정폭 레이아웃] position:fixed + left/right 대칭 inset 방식은 이미 뷰포트 중앙 기준으로
   대칭이라(.shop-wrap도 가운데 정렬이므로 뷰포트 중앙=셸 중앙) #btn-map-list-toggle(left:50%)의 정중앙 정렬은
   그대로 유지된다. 다만 좌우 inset 자체가 12px 고정이라 PC에서는 #map-result-badge/.btn-my-loc-round가
   셸이 아닌 뷰포트 실제 끝에 붙어있었으므로, 셸의 좌우 경계 + 12px로 계산해 맞춘다. */
#map-bottom-bar {
  position: fixed;
  bottom: calc(var(--shop-bottom-h) + 12px);
  left: max(12px, calc((100vw - var(--shop-app-width)) / 2 + 12px));
  right: max(12px, calc((100vw - var(--shop-app-width)) / 2 + 12px));
  height: 44px;
  z-index: 50;
}

.btn-my-loc-round {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--shop-primary);
  border: 1.5px solid var(--shop-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
}

/* "N곳 표시 중" - 좌측 끝에 고정, 내용 너비만큼만 차지(요청사항: width:40%/flex:1 금지). */
#map-bottom-bar #map-result-badge {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  min-width: auto;
  max-width: calc(100% - 120px);
  /* 목록보기 버튼(가운데)과 겹치지 않도록 최소한의 여유만 확보 */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "목록보기" - 화면(뷰포트) 정중앙에 고정해 하단 네비게이션 "내 주변" 아이콘과 세로로 정렬되도록 한다.
   #map-bottom-bar가 left:12px/right:12px로 화면 중앙 기준 대칭이므로 left:50%도 결과적으로 화면 중앙과 같다. */
#btn-map-list-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  min-width: auto;
  white-space: nowrap;
}

/* 지도 마커 팝업 */
#map-tooltip {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  display: none;
}

.map-tooltip-card {
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  font-size: 0.82rem;
  max-width: 200px;
}

/* [마맵 UX 참고 - 컴팩트 하단 카드] 기존 우측 슬라이드 큰 패널(width:350px, 우측에서 슬라이드)을
   지도를 가리지 않는 지도 하단 플로팅 컴팩트 카드로 교체. 화면 높이의 약 25~30% 이내로 제한.
   [68번] bottom:148px였을 때 카드와 공통 하단 네비게이션(#shop-bottom-nav) 사이에 큰 빈 공간이 생겼다.
   #map-shop-popup의 위치 기준(#map-container)은 이미 --shop-bottom-h를 제외한 높이라 bottom:0이면
   카드 하단이 정확히 하단 네비게이션 상단에 붙는다 - 약간의 시각적 여유만 남기고 거의 붙게 8px로 낮췄다.
   #map-bottom-bar(목록보기/내위치, z-index:50)보다 카드(z-index:90)가 더 위라 카드가 열리면 그 일부를
   자연스럽게 덮으며, 카드를 닫으면 다시 그대로 보인다(별도 JS show/hide 불필요, z-index만으로 해결).
   [79번 - 큰 화면에서 카드가 좁게 보이던 원인] #map-container는 head.php~tail.php의 .shop-wrap(전체
   사이트 공통 앱 셸, max-width:var(--shop-app-width)=600px, margin:0 auto)에 이미 중첩돼 있어 실제
   렌더 폭이 항상 600px 이하로 제한된다(#map-page-wrap 자신의 max-width:var(--max-width)=1280px는
   부모가 더 좁아 사실상 적용되지 않음, 조사로 확인). 즉 카드는 이미 셸 폭 이하인 #map-container를
   기준으로 left:12px/right:12px만으로도 셸을 넘치지 않는데, 여기 추가로 걸려 있던 max-width:420px +
   margin:0 auto가 셸(최대 576px, 좌우 12px 제외)보다 더 좁게 다시 가운데로 줄여놓고 있었다 - 작은
   화면(약 444px 미만, 420+24)에서는 left/right 12px이 더 좁아 이 max-width가 적용될 일이 없어 문제가
   드러나지 않다가, 큰 모바일/폴더블/셸 근접 폭에서 카드 양옆에 빈 공간이 생겼다. #map-bottom-bar/
   #map-search-candidates처럼 뷰포트 기준 calc()를 새로 쓸 필요 없이(그 둘은 position:fixed라 뷰포트
   기준 계산이 필요하지만 이 카드는 이미 셸 폭으로 제한된 #map-container 기준 absolute라 불필요),
   이 max-width/margin 두 줄만 제거해 left:12px/right:12px가 셸 폭 그대로 적용되게 했다. */
#map-shop-popup {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  max-height: 28vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  z-index: 90;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  transform: translateY(24px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

#map-shop-popup.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

#btn-popup-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.55);
  color: #fff;
  border: none;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#map-shop-popup-loading {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--shop-primary);
  gap: 10px;
  z-index: 10;
}

/* [마맵 UX 참고 - 컴팩트 하단 카드] map_shop_popup.php의 새 컴팩트 마크업. */
.map-popup-compact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
}

.map-popup-compact-thumb {
  position: relative;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #f1f1f1;
}

.map-popup-compact-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-popup-compact-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.map-popup-compact-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 2px;
}

.map-popup-compact-name {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-popup-compact-row {
  font-size: 0.78rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-popup-compact-row i {
  color: #e11d48;
  width: 14px;
  text-align: center;
}

.map-popup-compact-price {
  font-size: 0.92rem;
  font-weight: 700;
  color: #e11d48;
  margin-top: 2px;
}

.map-popup-compact-detail-btn {
  align-self: center;
  flex-shrink: 0;
  background: #111827;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

@keyframes map-spin {
  to {
    transform: rotate(360deg);
  }
}

/* [93번 - 현재 내 위치 표시] script.map.js의 updateCurrentUserLocationDot()가 naver.maps.Marker의
   icon.content로 그리는 작고 은은한 파란 점 - 업소 마커(핫플/프리미엄 등)와 완전히 별개 스타일이며
   클릭/텍스트 라벨이 없다. setInterval 대신 CSS animation만으로 은은하게 퍼지는 pulse를 표현한다. */
.map-user-location-dot {
  position: relative;
  width: 14px;
  height: 14px;
}
.map-user-location-dot .map-user-location-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.35);
  animation: map-user-location-pulse 2.4s ease-out infinite;
}
.map-user-location-dot .map-user-location-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #3b82f6;
  border: 2px solid #ffffff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}
@keyframes map-user-location-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70% {
    transform: scale(2.4);
    opacity: 0;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* [68번 - 목록 bottom sheet] 67번은 #map-container와 #map-list-view를 서로 밀어내는 push 전환(지도 자체가
   위/아래로 이동)이었으나, 사용자 요구는 "지도는 항상 그 자리에 그대로 있고 목록 패널만 시트처럼 아래(닫힘)/
   위(열림)로 움직이는" 구조였다. #map-container는 이제 이 전환에서 전혀 참조되지 않고(transform 없음),
   #map-list-view만 움직인다.
   top은 고정값이 아니라 script.map.js의 syncListViewOffset()가 #map-search-panel의 실제 렌더 높이(펼침/접힘에
   따라 달라짐)를 매번 측정해 인라인으로 지정한다 - 열림(translateY(0))일 때 시트 상단이 정확히 필터 바로
   아래에 붙는다. 닫힘(translateY(100%))일 때는 top 값과 무관하게 시트가 자기 높이만큼 아래로 밀려나 항상
   #map-page-wrap의 하단(=공통 하단 네비게이션 바로 위 경계)에서 시작하는 위치로 내려가고, #map-page-wrap의
   overflow:hidden에 의해 그 아래는 완전히 가려진다.
   z-index:30은 #map-container(z-index 미지정, 자동)보다는 위, #map-search-panel/#map-bottom-bar(둘 다 50)
   보다는 아래로 둬 - 시트가 열려도 상단 필터와 하단의 "지도보기"/"내위치" 플로팅 버튼이 항상 그 위에 그대로
   보이고 눌린다(기존 위치 변경 없음). */
#map-list-view {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  z-index: 30;
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 300ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  #map-list-view {
    transition-duration: 0.01ms;
  }
}

#map-list-view .shop-list-info {
  padding: 14px 12px 4px;
}

#map-list-view .shop-list-grid {
  padding: 0 12px 90px; /* 하단 고정 지도보기 버튼에 카드가 가리지 않도록 여백 확보 */
}

#map-list-loading {
  display: none;
  text-align: center;
  padding: 2rem 0;
  color: var(--shop-text-sub);
  font-size: 0.9rem;
}

/* ----- 공통 로딩/빈 상태 ----- */
.shop-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #9ca3af;
}

.shop-empty-state i {
  display: block;
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #d1d5db;
}

.shop-empty-state p {
  font-size: 0.9rem;
}

/* back-to-top */

/* ===== 마사지 사이트 커스텀 추가 클래스 ===== */
.shop-section-wrap {
  padding: 0rem 0;
}

.btn-scrap.active {
  color: #ef4444;
}


/* ── 맵 팝업 상세 스타일 (마사지 감성) ── */
.map-popup-img-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.map-popup-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-popup-category-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(225, 29, 72, 0.9);
  color: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.map-popup-recommend-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(245, 158, 11, 0.9);
  color: #fff;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.map-popup-info-wrap {
  padding: 18px 15px 10px;
}

.map-popup-shop-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
}

.map-popup-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-popup-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.4;
}

.map-popup-detail-row i {
  color: #e11d48;
  margin-top: 3px;
  width: 16px;
  text-align: center;
}

.map-popup-feature-wrap {
  background: #fff0f5;
  margin: 10px 15px;
  padding: 15px;
  border-radius: 12px;
  border: 1px solid #ffe4e6;
}

.map-popup-feature-title {
  font-weight: 700;
  color: #be123c;
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.map-popup-feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.map-popup-feature-item {
  background: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #374151;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.map-popup-feature-item i {
  color: #fb7185;
  font-size: 1rem;
}

.map-popup-feature-item.col-full {
  grid-column: span 2;
  background: #fff1f2;
  border: 1px solid #fecdd3;
}

.map-popup-feature-item.col-full i {
  color: #e11d48;
}

.map-popup-desc-wrap {
  padding: 5px 15px 20px;
}

.map-popup-desc-title {
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.map-popup-desc-text {
  font-size: 0.85rem;
  color: #6b7280;
  line-height: 1.5;
  background: #f9fafb;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.map-popup-action-wrap {
  position: sticky;
  bottom: 0;
  padding: 12px 15px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  z-index: 10;
}

.map-popup-btn-detail {
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, #e11d48, #be123c);
  color: #fff;
  padding: 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 0 4px 10px rgba(225, 29, 72, 0.3);
}

.map-popup-btn-detail:hover {
  background: linear-gradient(135deg, #be123c, #9f1239);
  color: #fff;
  transform: translateY(-1px);
}

/* ── 지도 클러스터 마커 및 뱃지 복구 ── */
.map-cluster-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.28);
  border: 3px solid rgba(255, 255, 255, 0.55);
  transition: transform .15s, box-shadow .15s;
  line-height: 1;
  flex-direction: column;
  position: relative;
}

.map-cluster-marker:hover {
  transform: scale(1.10);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.35);
}

.map-cluster-count {
  font-size: 15px;
  line-height: 1;
}

.map-cluster-label {
  font-size: 9px;
  opacity: .75;
}

.map-cluster-name {
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 1px;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#map-result-badge {
  /* [내주변 지도 하단 버튼 재배치] #map-container 안의 절대위치 배지였으나 #map-bottom-bar의 일반 flex 항목으로 이동. */
  background: rgba(15, 17, 23, 0.82);
  backdrop-filter: blur(8px);
  color: #fff;
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .3s;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

#map-result-badge .badge-count {
  color: #60a5fa;
  font-size: 15px;
  font-weight: 800;
}

/* ── (지도 스타일은 위 리빌드 섹션 참조) ── */

/* peer-checked utility 보강 (shop_list.php 등 바텀시트 필터용) */
.peer:checked~.peer-checked\:bg-primary {
  background-color: var(--shop-primary) !important;
}

.peer:checked~.peer-checked\:text-white {
  color: #fff !important;
}

.peer:checked~.peer-checked\:border-primary {
  border-color: var(--shop-primary) !important;
}

.shop-section-wrap .shop-section-title h2 {
  font-size: 1.2em;
}

/* ----- 강조 섹션 (추천/프리미엄 샾) ----- */
.shop-section-wrap.recommend,
.shop-section-wrap.premium {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.shop-section-wrap.recommend .shop-card,
.shop-section-wrap.premium .shop-card {
  transform: scale(1.05);
  transition: transform .3s ease;
  margin: 10px;
}

.shop-section-wrap.recommend .shop-card:hover,
.shop-section-wrap.premium .shop-card:hover {
  transform: scale(1.08);
}

.shop-section-wrap.recommend .shop-section-title h2,
.shop-section-wrap.premium .shop-section-title h2 {
  font-size: 1.3em;
  color: var(--shop-primary);
}

.shop-section-wrap.recommend .shop-section-more,
.shop-section-wrap.premium .shop-section-more {
  font-weight: 600;
  background: var(--shop-primary-light);
  color: var(--shop-primary);
  padding: 0.4rem 0.8rem;
  border-radius: 0.4rem;
}

/* ----- 인덱스 게이트 탭 (마사지/구인구직 전환) ----- */
.index-gate-wrapper {
  width: 100%;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #0f172a 0%, #1e3a5f 45%, #0c4a6e 100%);
}

.index-gate-wrapper::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.index-gate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  /*background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  */
  padding: 0px;
  position: relative;
  z-index: 1;
}

.index-gate a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.65rem 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(186, 220, 254, 0.75);
  text-decoration: none;
  /*border-radius: 9px;*/
  background: transparent;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.index-gate a i {
  font-size: 1.05em;
  transition: transform 0.25s ease;
}

.index-gate a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

.index-gate a:hover i {
  transform: scale(1.18) rotate(-3deg);
}

.index-gate a.active {
  background: linear-gradient(135deg, #3b82f6 0%, #38bdf8 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 16px rgba(56, 130, 246, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  font-weight: 800;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.index-gate a.active i {
  transform: scale(1.12);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}

/* ================================================================
   [60번 - PC 강제 모바일 레이아웃] 59번은 프론트 앱 셸의 "바깥 폭"만 600px로 고정했지만, CSS의
   @media (min-width: ...) 는 셸이 아니라 브라우저 실제 뷰포트 폭을 기준으로 판정되므로, 뷰포트가 넓은 PC에서는
   아래 "데스크톱 확장" 규칙들이 계속 켜진 채로 600px 셸 안에 욱여넣어지고 있었다(업소 목록 2/3열 grid,
   지도 검색패널 좌상단 고정박스 등). 뷰포트가 600px보다 넓어지는 순간(셸 바깥에 여백이 생기는 시점)부터
   해당 규칙들을 실제 모바일 기준값으로 되돌려, 셸 내부는 항상 모바일 레이아웃만 쓰도록 강제한다. 이 블록은
   원본 규칙보다 파일 뒤쪽에 있어야 같은 specificity에서 CSS 우선순위(소스 순서)로 이긴다 - 향후 이 두
   selector를 다시 손댈 때 이 사실을 유의할 것. 뷰포트가 600px 이하(실제 모바일)에서는 이 블록 자체가
   비활성화되어 기존 모바일 CSS만 그대로 적용되므로 실제 스마트폰 화면은 전혀 영향받지 않는다.
   ================================================================ */
@media (min-width: 601px) {
  /* 업소 목록 카드 그리드 - 일반 목록/홈케어/지도 목록보기가 전부 공유하는 단일 selector(.shop-list-grid).
     원본: @media(min-width:640px)에서 2열, @media(min-width:1024px)에서 3열로 바뀌던 것을 실제 모바일과
     동일한 1열로 되돌린다. 카드 자체(.shop-card.horizontal)는 이미 폭 100% 가로형 카드라 별도 수정 불필요. */
  .shop-list-grid {
    grid-template-columns: 1fr;
  }

  /* 지도 검색 패널 - 원본 @media(min-width:640px)에서 좌상단 360px 고정 박스로 바뀌던 것을, 실제 모바일과
     동일한 상단 가로폭 패널 형태(기본 규칙과 동일한 값)로 되돌린다. */
  #map-search-panel {
    left: 12px;
    top: 12px;
    right: 12px;
    width: auto;
  }

  /* [61번] root font-size - 실제 뷰포트가 정확히 600px일 때 아래 공식이 계산하는 값 그대로를 PC에서도
     사용한다(임의의 값을 새로 만들지 않고, html{font-size:...} 공식의 100vw 자리에 600px를 그대로 대입).
     이 규칙은 파일에서 가장 늦게 선언되므로 위쪽의 @media(min-width:1451px) 고정값(16px)보다 항상 우선한다
     - PC 폭(601px~무한대)에서 전부 동일한 "600px 뷰포트 기준" 값 하나로 고정되어, 1920/1440/1200/900/700px
     사이에서 글자 체감 크기가 달라지지 않는다. 실제 모바일(≤600px)은 이 블록이 비활성화되어 기존
     반응형 공식(및 max-width:576px의 16px 고정 규칙)이 그대로 적용된다. */
  html {
    font-size: calc(16px + (4 * ((600px - 1280px) / (1280 - 360))));
  }

  /* [61번] .shop-content-wrap 좌우 padding - 원본 @media(max-width:600px)에서 1rem→0.5rem으로 줄던 것을
     PC 셸에서도 동일하게 적용(뷰포트 정확히 600px는 이 규칙의 적용 범위에 포함되므로). */
  .shop-content-wrap {
    padding: 0 0.5rem;
  }

  /* [61번] .sub-tit2(업소상세 "업소정보" 탭 제목 등 공용 섹션 제목) 여백 - 원본 @media(max-width:768px) 값을 그대로 재사용. */
  .sub-tit2 {
    margin-bottom: 10px;
  }

  /* [61번] 하단 푸터 - 원본 @media(max-width:600px)의 모바일 세로쌓기 규칙을 PC 셸에도 그대로 적용
     (데스크톱 가로 다단 레이아웃이 셸 안에서 찌그러지는 것을 방지). 값 자체는 새로 만들지 않고 그대로 재사용. */
  .footer-body {
    flex-direction: column;
    gap: 24px;
    padding: 28px 20px 20px;
  }

  .footer-body::before {
    display: none;
  }

  .footer-brand {
    align-items: center;
    width: 100%;
  }

  .footer-tagline {
    text-align: center;
  }

  .footer-biz-row {
    flex-direction: column;
    gap: 2px;
  }

  .footer-policy-bar {
    gap: 8px 14px;
  }

  /* [61번] 마이페이지 통계 그리드 - 원본 @media(min-width:640px)에서 4열로 바뀌던 것을 실제 모바일(2열)로
     되돌린다. 마이페이지도 일반 사용자 프론트이며 관리자(/_super/)와는 무관한 selector임을 확인했다. */
  .mypage-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* [61번] 구인구직 목록형 카드 - 원본 @media(max-width:768px)의 모바일 세로 카드 규칙을 PC 셸에도 그대로
     적용(데스크톱 가로 테이블형 카드(comp-name 180px+job-info-tags 250px+job-meta 120px, 합 550px+간격)가
     600px 셸 안에서 찌그러지는 것을 방지). 값은 새로 만들지 않고 기존 모바일 규칙을 그대로 재사용. */
  .jobs-list-container.view-list .job-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }

  .jobs-list-container.view-list .job-card .comp-name,
  .jobs-list-container.view-list .job-card .job-info-tags,
  .jobs-list-container.view-list .job-card .job-meta {
    width: 100%;
  }

  .jobs-list-container.view-list .job-card .job-meta {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed #e5e7eb;
    padding-top: 12px;
  }

  /* [61번] 필터 바텀시트 - 원본 @media(min-width:768px)에서 480px 가운데 고정 박스로 바뀌던 것을, 뷰포트
     600px는 768px 미만이라 실제로는 이 확장 규칙이 적용되지 않는다는 점에 맞춰 모바일 기본값(전체폭
     바텀시트)으로 되돌린다. */
  .filter-sheet {
    width: 100%;
    left: 0;
    transform: none;
  }
}

/* ================================================================
   [61번 - 업소상세 탭 overflow 구조적 수정] 60번은 body{overflow-x:hidden}으로 증상만 가렸으나, 실제 원인을
   특정하지 못한 채 남겨뒀다. 이번에 실제 코드(shop_detail.php/style.css)를 재확인한 결과 .shop-detail-tab-bar-wrap는
   CSS 규칙이 전혀 없는 무스타일 div였고, .shop-detail-tab-bar는 display:flex뿐 명시적 width가 없었으며,
   자식 .shop-detail-tab(flex:1)에는 flexbox의 기본값인 min-width:auto가 그대로 적용되고 있었다 - flex item의
   min-width:auto는 "내용이 줄어들 수 있는 최소 폭(min-content)"보다 더 줄어들지 않게 막는 값으로, 특정 상황
   (내용 폭 합이 부모보다 커지는 경우)에서 flex row 전체가 부모 폭을 넘어 튀어나오는 잘 알려진 원인이다.
   브라우저가 없는 이 환경에서 실제 렌더링으로 100% 재현·확정하지는 못했지만(정직하게 명시 - 정확한 미확정
   원인은 CLAUDE_REPORT.md 61번에 별도 기록), 아래 3가지는 그 자체로 항상 안전하고(레이아웃 값을 새로 만들지
   않음, 실제 모바일 표시에도 전혀 영향 없음) 이 클래스의 flex-overflow를 구조적으로 차단하는 표준적인 수정이라
   PC/모바일 구분 없이 상시 적용한다(body 레벨의 overflow-x:hidden과 달리 "증상을 가리는" 것이 아니라 탭
   요소 자신이 부모 폭을 실제로 넘지 않도록 만드는 수정). ================================================================ */
.shop-detail-tab-bar-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.shop-detail-tab-bar {
  width: 100%;
  box-sizing: border-box;
}

.shop-detail-tab {
  min-width: 0;
}