@charset "utf-8";

@font-face {
  font-family: 'SpokaHanSansNeo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Thin.woff') format('woff');
  font-weight: 100; font-display: swap;
}
@font-face {
  font-family: 'SpokaHanSansNeo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Light.woff') format('woff');
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: 'SpokaHanSansNeo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'SpokaHanSansNeo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Medium.woff') format('woff');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'SpokaHanSansNeo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Bold.woff') format('woff');
  font-weight: 700; font-display: swap;
}

:root{
  --total: 100%;
  --leftbar: 250px;
  --leftbar-collapsed: 60px;
  --rightbar: 300px;
  --leftgap: 60px; /* 왼쪽 사이드바 여백 조정 */
  --rightgap: 0px; /* 왼쪽 사이드바 여백 조정 */

  /* 가운데 콘텐츠 영역 계산 */
  --container: calc(var(--total) - (var(--leftbar) + var(--rightbar)) );
  --container-collapsed: calc(var(--total) - (var(--leftbar-collapsed) + var(--rightbar)) );


  --safe-left: calc(var(--leftbar) + var(--leftgap));
  --safe-right: calc(var(--rightbar) + var(--rightgap));

  --radius: 12px;
  --border: #e9ecef;
  --text: #333;
  --muted: #6c757d;
  --accent: #FB4949;
  --bg-soft:#f8f9fa;
}


* { margin:0; padding:0; box-sizing:border-box; }
html { font-size: 10px; }
html, body { height: 100%; }
body{
  font-size: 16px;
  font-family:'SpokaHanSansNeo','Malgun Gothic',sans-serif;
  color:var(--text);
  background:#fff;
  overflow: auto;
  /* padding-left: var(--leftgap); */
  padding-left : 0;
  padding-right: var(--rightgap);
}

a {
    color: #333;
    text-decoration: none !important;
}
a:focus, a:hover, a:active, a.active{
    color: #333;
    text-decoration: none !important;
}

.accent_color{color: #FB4949;}


.mt-1 {
   margin-top: 1rem !important;
}

.mt-2 {
  margin-top: 2rem !important;
}

.mt-3 {
  margin-top: 3rem !important;
}

.mt-4 {
  margin-top: 4rem !important;
}

.mt-5 {
  margin-top: 5rem !important;
}

.mb-1 {
  margin-bottom: 1rem !important;
}

.mb-2 {
  margin-bottom: 2rem !important;
}

.mb-3 {
  margin-bottom: 3rem !important;
}

.mb-4 {
  margin-bottom: 4rem !important;
}

.mb-5 {
  margin-bottom: 5rem !important;
}

.mb-10 {
  margin-bottom: 10rem !important;
}

.mr-1 {
	margin-right : 1rem !important;
}
.mr-2 {
	margin-right : 2rem !important;
}
.mr-3 {
	margin-right : 3rem !important;
}
.mr-4 {
	margin-right : 4rem !important;
}
.mr-5 {
	margin-right : 5rem !important;
}


.ml-1 {
	margin-left: 1rem !important;
}

.ml-2 {
	margin-left: 2rem !important;
}

.ml-3 {
	margin-left: 3rem !important;
}

.ml-4 {
	margin-left: 4rem !important;
}

.ml-5 {
	margin-left: 5rem !important;
}

.margin-center {
  margin:0 10rem !important;
}

.padding-0 {
  padding: 0 !important;
}
.padding-1 {
  padding: 1rem;
}

.padding-2 {
  padding: 2rem;
}

.padding-3 {
  padding: 3rem;
}

.bold{
  font-weight:bold;
}

.font-gray {
	color: rgb(153, 153, 153);
}
.font-red {
	color: rgb(237, 73, 48)
}

.bg-color-pink {
  background-color: #fbe2de;
}

.bg-color-gray {
  background-color: #f4f4f4;
}

.font-color-orange {
	color: rgb(240, 129, 0) !important;
}

.petcopharm-red {
  color: rgb(250, 80, 80);
}

.petcopharm-yellow {
  color: rgb(255, 228, 3);
}

.text-left{
  text-align: left !important;
}

.text-underline {
	text-decoration: underline;
}

/* 모달 열렸을 때 뒷페이지 스크롤 방지  */
.lockBodyScroll {

}


/* ==========스크롤바 ========== */

/* === Thin, light scrollbars + auto-hide when not scrolling === */
/* 대상: 좌/우 사이드바 */
.leftbar,
.rightbar{
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent; /* 기본은 안 보이게 */
}

.leftbar::-webkit-scrollbar,
.rightbar::-webkit-scrollbar{
  width: 6px;
  height: 6px;
}
.leftbar::-webkit-scrollbar-track,
.rightbar::-webkit-scrollbar-track{
  background: transparent;
}
.leftbar::-webkit-scrollbar-thumb,
.rightbar::-webkit-scrollbar-thumb{
  background-color: transparent;         /* 기본은 투명 */
  border-radius: 8px;
  transition: background-color .25s ease; /* 은은한 페이드 */
}

/* 스크롤 중/직후에만 살짝 보이도록 */
.is-scrolling .leftbar,
.is-scrolling .rightbar{
  /* Firefox */
  scrollbar-color: rgba(0,0,0,.28) transparent; /* 연한 회색 */
}
.is-scrolling .leftbar::-webkit-scrollbar-thumb,
.is-scrolling .rightbar::-webkit-scrollbar-thumb{
  background-color: rgba(0,0,0,.24); /* 연한 회색 */
}

/* 마우스 올렸을 때만 조금 더 진하게 */
.is-scrolling .leftbar:hover::-webkit-scrollbar-thumb,
.is-scrolling .rightbar:hover::-webkit-scrollbar-thumb{
  background-color: rgba(0,0,0,.35);
}

.leftbar{
 position: fixed; top: 0; height: 100dvh;
 background: #fff;
 /* border: 1px solid var(--border); */
 border-radius: var(--radius);
 z-index: 20;
 display:flex; flex-direction:column;
 overflow: auto;
 -webkit-overflow-scrolling: touch;
}

 .rightbar{
  position: fixed; top: 0; height: 100dvh;
  background: #fff;
  /* border: 1px solid var(--border); */
  border-radius: 0;
  z-index: 30;
  display:flex; flex-direction:column;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* .leftbar{ left: var(--leftgap); width: var(--leftbar); } */

.leftbar.open { left: 0; width: var(--leftbar); }
.leftbar.collapsed { left: 0; width: var(--leftbar-collapsed); }
.leftbar.collapsed .sb-logo { padding: 15px 10px; text-align: center; }
/* 접힘 상태: 텍스트 라벨만 숨김(아이콘 유지) */
.leftbar.collapsed .sb-menu .label,
.leftbar.collapsed .sub,
.leftbar.collapsed .company,
.leftbar.collapsed .sb-item.has-sub::after { display: none; }

.leftbar.collapsed .sb-logo img{width:24px;content: url('/theme/PB/img/petcopharm/img2.png');}
.leftbar.open .sb-logo img{height:36px;content: url('/theme/PB/img/petcopharm/img6.png');}

.rightbar{ right: var(--rightgap); width: var(--rightbar); padding: 16px; gap:16px; }

/* 왼쪽 사이드바 */
.sb-logo{ padding:16px 16px 12px; }
.sb-logo a{ display:inline-flex; gap:10px; align-items:center; text-decoration:none; color:inherit; }
.sb-logo img{ height:36px; width:auto; object-fit:contain; display:block;}
.sb-menu{ padding: 10px 0 16px; }
.sb-item{
  margin: 0px; padding: 12px 14px; border-radius:10px;
  display:flex; align-items:center; gap:10px; cursor:pointer;
  transition: background .2s ease;
}
.sb-item:hover{ background:#f5f6f7; }
.sb-item.active{ background:#FFE8E8; }
.sb-icon{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; color:inherit; }
.sb-icon svg{ width:20px; height:20px; stroke:currentColor; stroke-width:1.8; fill:none; }

.sb-item.has-sub::after{
  content:""; margin-left:auto; width:8px; height:8px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(45deg); opacity:.5; transition:.2s;
}
.sb-item.has-sub.open::after{ transform: rotate(225deg); opacity:1; }

.sub{
  max-height:0; overflow:hidden; transition:max-height .25s ease;
    margin:0 12px;
}
.sub.open{ max-height: 260px; }
.sub-item{
  padding:12px 16px 12px 44px; font-size:14px; color:var(--muted);
  border-bottom:1px solid #f2f2f2; cursor:pointer; background:#fff;border-radius:8px;
}

.sub-item a {
  display: block;
  width: 100%;
  height: 100%;
}
.sub-item:last-child{ border-bottom:0; }
.sub-item:hover{ background:#f9fafb; }
.sub-item.active{ background:var(--accent); color:#fff; }
.sub-item.active a{ background:var(--accent); color:#fff; }

/* Hamburger */
.hamburger {
  position: fixed;
  top: 56px;
  left: 45px;
  z-index: 30;
  background: white;
  border: 2px solid #e9ecef;
  color: #6c757d;
  padding: 8px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
  transition: left 0.3s ease, border-color .2s ease, background .2s ease;
}
/* .hamburger:hover { background: #f8f9fa; border-color: #dc3545; } */

.hamburger-icon{
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
body.leftbar-open .hamburger { left: 235px; }


.company{
  margin-top:auto; padding:16px 16px 18px; font-size:12px; color:#6c757d;
  border-top:1px solid #f1f3f5; border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius);
  background:#fff;
}
.company b{ display:block; margin-bottom:6px; color:#6c757d; }





/* 오른쪽 사이드바 */

.login{ display:flex; gap:10px;justify-content: flex-end; }
.login a{ text-decoration:none; color:var(--text); font-size:14px; padding:6px 10px; border-radius:6px; }
.login a:hover{ background:#f5f6f7; color:var(--accent); }

.search{ width:100%; padding:10px; border:1px solid var(--border); border-radius:20px; font-size:14px; }

.card{ border:1px solid #f0f0f0; border-radius:10px; padding:10px; text-align:center; background:#fff; }

.btn-pharm-category {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 50px;
  background: #fc5050;
  color: #fff;
  font-size: 15px;
  cursor:pointer;
  width: 50%;
  align-self: center;
  justify-content: center;
}

.pharm-category-img {
  width:20px;margin-right: 0.5rem;
}



/* 단골약국저장버튼 */
.btn-mystore {
  padding: 0 2rem;
  height: 40px;
  border: 1px solid #4b5563;
  background-color: #fff;
  color: #4b5563 !important;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 500;
}

.btn-mystore .loc-icon {
  width: 30px;
}


.avatar{ width:60px; height:60px; border-radius:50%; background:var(--bg-soft); margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center; font-size:24px; }
.username{ font-weight:700; margin-bottom:10px; display:flex; gap:6px; justify-content:center; }
.stats{ margin-bottom:10px; }
.stat{ font-size:12px; color:var(--muted); margin-bottom:6px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.mylink{ color:var(--muted); text-decoration:none; font-size:14px; text-align:right; display:block; margin-bottom: 6px; }

.actions{ display:flex; flex-direction:column; gap:10px; }
.action{
  padding:14px; border: none; border-radius:10px; cursor:pointer; font-size:14px;
  display:grid; grid-template-columns: 7fr 3fr; align-items:center; gap: 12px; transition: .2s;
}
.action .cnt{ display:flex; flex-direction:column; gap:4px; text-align:left; }
.action .ttl{ font-weight:600; }
.action .sub{ font-size:12px; opacity:.8; }
.action .ico{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; font-size:20px; margin:0 auto; }
.action.primary{ background:var(--accent); color:#fff; }
.action.primary:hover{ filter:brightness(.95); }
.action.secondary{ background:#f3f4f6; }
.action.secondary:hover{ background:#fff5f5; }

/* 오른쪽 사이드 바 - 하단 퀵메뉴 */
.pickup-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pickup-menu li {
  position: relative;
}

/* 가운데 메뉴들만 구분선 표시 (첫 번째, 마지막 제외) */
.pickup-menu li:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 64px; /* 아이콘+여백 뒤에서부터 시작 */
  right: 0;
  top: 0;
  height: 1px;
  background: #eee;
}

.pickup-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 5px;
  text-decoration: none;
  color: #333;
  background: #fff;
  transition: background 0.2s ease;
}

.pickup-menu a:hover {
  background: #fafafa;
}

.icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-wrap img {
  width: 30px;
  height: 30px;
}

.menu-text {
  flex: 1;
  font-size: 16px;
}

.arrow {
  font-size: 23px;
  color: #333;
}



/* 맞춤형 콘텐츠 */
.content-title-box{
  display: flex;
  justify-content: space-between;
}
.content-title{font-weight:600;margin-bottom:10px;text-align:left;padding:16px 16px 0 16px;}
.content-box{display:flex;flex-direction:column;}
.content-controls{display:flex;justify-content:flex-end;padding:0 4px;}
.content-controls button{
  border:0;background:unset;border-radius:8px;padding:6px 10px;cursor:pointer;font-size:12px;
}
.content-controls button:hover{background:unset;}

.content-item{border:1px solid #eee;overflow:hidden;text-align:left;background:#fafafa;transition:transform .2s, box-shadow .2s;cursor:pointer;border-radius:8px;}
.content-item:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(0,0,0,.1);}
.content-item h4{font-size:14px;margin:12px 12px 8px;font-weight:700;}

.content-body{overflow:hidden;max-height:1000px;transition:max-height .25s ease;will-change:max-height;}
.content-item.is-collapsed .content-body{max-height:0;}
.content-item img{width:100%;height:150px;object-fit:cover;}
.content-item p{font-size:12px;color:#555;margin:8px 12px 12px;line-height:1.5;}


/* 공지 */
.notice-wrap {
  height: 40px;
  overflow: hidden;
  position: relative;
}

.notice-list {
    display: flex;
    flex-direction: column;
}

.notice-item {
  display: flex;
  align-items: center;
  height: 40px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  line-height: 1;
}

.notice-badge {
  background: red;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 20px;
  margin-right: 6px;
}

.event-badge{
  background: blue;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 20px;
  margin-right: 6px;
}

/* 카드-배너 */
.card-banner {padding:0; border:0;}

.banner-cs-box {
  background-color: #333333;
  padding: 1.5rem;
}
.banner-cs-text {
  color: #fff;
  font-weight: 300;
}
.banner-cs-text:focus, .banner-cs-text:hover, .banner-cs-text:active, .banner-cs-text.active{
    color: #fff;
}

.r-carousel-banner {
  height: 172px !important;
}


/* 상품 슬라이드 */
.r-carousel {
  position: relative;
  width: 100%;
  height: 330px;
  overflow: hidden;
  border-radius: 8px;
}

.r-carousel-title {
  font-weight: 600;
  margin-bottom: 10px;
  text-align: left;
}

.slides {
  display: flex;
  transition: transform 0.4s ease;
  cursor: grab;
}

.slide-item {
  flex-shrink: 0;
  width: 100%;
}

.slide-item img {
  width: 100%;
  /* height: 200px; */
  object-fit: cover;
  border-radius: 8px;
}

.slide-item .caption {
  font-size: 15px;
  margin-top: 6px;
  color: #333;
  font-weight: 500;
}

.dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
  transition: background 0.3s;
}

.dots span.active {
  background: #FB4949;
}


/* ========== 가운데 콘텐츠 ========== */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 25px 30px 148px 50px;
}


/* 기본값: 여백 없음 */
.container { margin-left: 0; }
/* 접힘(60px) 상태: 60px 여백 적용 */
.leftbar.collapsed ~ .container { margin-left: var(--leftbar-collapsed); max-width: var(--container-collapsed)}
/* 펼침(250px) 상태: 250px 여백 적용 */
.leftbar.open ~ .container{ margin-left: var(--leftbar); }





.header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
.title{ font-size:28px; font-weight:700; }
.breadcrumb{ font-size:14px; color:var(--muted); }
.subtitle{ font-size:16px; color:var(--muted); border-bottom:1px solid var(--border); padding-bottom:10px; }

.section{ margin-bottom:32px; border-bottom:1px solid #f2f2f2; padding-bottom:24px; }
.split{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
.h2{ font-size:20px; font-weight:700; margin-bottom:10px; }
.desc{ font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:16px; }
.btn{ background:#666666; color:#EEEEEE; border:0; padding:12px 18px; border-radius:8px; font-size:14px; cursor:pointer; transition:.2s; }
.btn:hover{ background:#5d666e; }

.grid-6{ display:grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,1fr); gap:16px; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.cat{ text-align:center; }
.circle{
  width:80px; height:80px; border-radius:50%; background:#f8f9fa; border:2px solid var(--border);
  margin:0 auto 8px; display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--muted);
  transition:.2s;
}
.cat:hover .circle{ border-color:var(--accent); background:#fff5f5; }
.clab{ font-size:12px; }

.video{ display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center; }
.thumb{
  width: 400px; height: 225px; background-image:url('https://i.ytimg.com/vi_webp/UYmffLYZaIw/sddefault.webp');
  background-size:cover; background-position:center; border-radius: 10px; box-shadow:0 4px 8px rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.play{ width:42px; height:42px; background: rgba(255,255,255,.9); border-radius:50%;
  display:flex; align-items:center; justify-content:center; }


/* 이벤트용 배너 */
.banners{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;           /* 배너 간 간격 */
  margin: 8px 0;       /* 상하 여백 */
}

/* 배너 카드 */
.banner{
  background: #666666;
  height: 100px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #EEEEEE;
  font-size: 14px;
}



/* 공통 모달 */
.module-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

.module-modal.is-open {
  display: flex;
}

.module-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

.module-modal__dialog {
  position: relative;
  z-index: 1;
  background: #fff;
  width: 100%;
  max-width: 510px;
  border-radius: 20px;
  padding: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

.module-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
}

.module-skin {
  margin: 0 auto;
  /* width: 450px; */
  background: #fff;
  margin-top: 20px;
}

.module-card{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
}
.module-btn-box {
	margin-top: 2rem;
  display: flex;
  justify-content: space-evenly;
}
.btn_submit_50 {
  background-color:#4b5563;
  color: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  min-height: 50px;
  height: 50px;
  width: 40%;
  font-weight: bold;
  font-size: 1.083em;
  display: flex;
  justify-self: center;
  justify-content: space-evenly;
  align-items: center
}
.btn_cancel_50 {
  background-color:#ddd;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  min-height: 50px;
  height: 50px;
  width: 40%;
  font-weight: bold;
  font-size: 1.083em;
  display: flex;
  justify-self: center;
  justify-content: space-evenly;
  align-items: center
}

.btn_back_100 {
  background-color:#ddd;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  min-height: 50px;
  height: 50px;
  width: 100%;
  font-weight: bold;
  font-size: 1.083em;
  display: flex;
  justify-self: center;
  justify-content: space-evenly;
  align-items: center
}

.module-card-notice {
  color: #F44336;
  margin-top: 2rem;
}


@media (max-width: 768px){
  .banners{ grid-template-columns: 1fr; }
  .subtitle{font-size: 12px;padding:0.5rem 1rem;margin: 0rem;}
  .title{font-size: 20px;padding: 0 1rem;margin: 0rem;}
  .header{margin-bottom: 0;}
  #pcpMain{margin-top:1rem;}

  /* 공통 모달 */
  .module-modal__dialog {
    margin: 0 12px;
    padding: 15px;
  }
  .module-skin {
    width: 100%;
    max-width: 100%;
    padding: 0px;
    margin-top: 20px;
    background: #fff;
  }
  .module-skin form {
    width: 100%;
  }
  .module-card {
    padding: 16px;
    border-radius: 12px;
  }

}




/* ========== Responsive ========== */
@media (max-width: 1024px){
  :root{
    --leftgap: 16px;
  }
  .split{ grid-template-columns:1fr; }
  .thumb{ width:100%; height: 52vw; max-width: 480px; }
}
@media (max-width: 768px){
  /* body{ padding-left: 16px; padding-right: 16px; } */
  .leftbar, .rightbar{ display:none; }
  .container{ padding-top: 16px; }
}



/* ========== theme.default.css ========== */

/* 서브 메뉴 부분 */

.sub-menu-box{
  width: 100%;
	text-align: center;
}


.sub-menu-ul {
  width: auto;
  display: inline-block;
  padding: 0;
}

.sub-menu-li {
  display: inline-block;
}

.sub-menu-a {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
  text-transform: uppercase;
  font-size: 22px;
  color: #373737;
}

.sub-menu-a.active {
    font-weight: bold;
    border-bottom: 1px solid #fc5050;
    color: #fc5050;
    padding-bottom: 5px;
}

.sub-menu-a:hover {
    color: #fc5050 !important;
}


.inside-box {
  /* max-width: 1280px;  */
  /* margin: 20px 0 auto; */
  position: relative;
  text-align: center;
}


.petcopharm-text{
  font-size: 16px;
  color: rgb(217, 216, 216);
  font-weight: bold;
}

.intro-img{
  width: 55%;
  height: 100%;
}

.intro-img02{
  width: 65%;
  height: 100%;
}

.main-text{
  font-size: 46px !important;
}

.sub-text {
  font-size: 25px !important;
}

.s-sub-text {
  font-size: 18px !important;
}

.s-sub-text-box{
	display: flex;
  justify-content: center;
  align-items: center;
}

.tip-text {
	font-size: 18px;
}

.tip-sub-text {
	font-size: 16px;
}

.info-text {
  font-size: 22px;
}
.info-product-text {
  color:#888888;
}

.img-mark-click {
	width:50px;
	margin-left: 1rem;
}

.current-user-position-box{
	justify-content: space-between;
	display: flex;
}

.btn-flex-end {
  justify-content: flex-end;
}


.notice-box {
	align-content: center;
}

.notice-text {
	font-size: 18px;
}


/* 문의하기, 예약하러가기 버튼 */
.both-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.kakao-btn,
.go-reservation-btn {
  display: flex;
  align-items: center;
  background-color: #fae100;
  color: #371d1e !important;
  border: 0;
  width: 180px;
  border-radius: 30px;
  font-size: 20px;
  padding: 10px;
  letter-spacing: 0;
  text-decoration: none;
  font-weight: 400;
}

.go-reservation-btn {
  background-color: #fb4949;
  color: #fff !important;
  justify-content: center;
}

.btn-icon-kakao {
  width: 40px;
  margin-right: 5px;
  vertical-align: middle;
}

.btn-icon-reservation {
  width: 28px;
  margin:0 5px;
  vertical-align: middle;
}


/* info - 펫코팜 서비스 */

.info-hero{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  text-align: -webkit-center;
}
.info-hero-img{
  width: 80%;
  height: 425px;
  display: block;
  object-fit: cover;
  border-radius: 40px;
}

/* 이미지 왼쪽 절반 검정 오버레이 */
.info-hero-overlay{
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  left: 10%;
  border-radius: 40px 0 0 40px;
  background: rgba(0, 0, 0, .40);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 24px 60px;
}
.overlay-title{ font-size:32px; line-height:1.35; font-weight:700; text-align: left;}
.overlay-desc{
    font-size: 16px;
    opacity: .9;
    text-align: left;
    font-weight: 300;}


@media (max-width: 768px){
  .info-hero-img{ height: 260px; }
  .info-hero-overlay{
    width: 100%;
    background: linear-gradient( to bottom,
      rgba(0,0,0,.55), rgba(0,0,0,.55) );
    justify-content: flex-end;
    padding: 18px 16px;
  }
  .overlay-title{ font-size:20px; }
}

/* ===== 하단 아이콘 그리드 ===== */
.info-features{
  width: 80%;
  padding: 2rem;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 30%;
  align-items: start;
}


@media (max-width: 780px){
  .info-features{ grid-template-columns: 1fr; gap: 28px; }
}

.feature-body{
  text-align: left;
}

.feature-icon-wrap{
  width: 70px; height: 60px;
  display: grid; place-items: center;
}
.feature-icon{ width: 70px; height: 50px; object-fit: contain; justify-self: left; }

.feature-icon2 {width: 60px;}
.feature-icon3{width: 45px;}

.feature-title{
  margin: 0 0 10px;
  font-size: 25px;
  line-height: 1.55;
  font-weight: 500;
  color: #111;
}

.feature-bullets{
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature-bullets li{
  position: relative;
  padding-left: 14px;
  font-size: 16px;
  line-height: 1.9;
  color: #808080;
}
.feature-bullets li::before{
  content: "·";
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.9;
  color: #808080;
  font-weight: 400;
}




/* info - 펫코팜 추천상품 */
.info-product-img{width: 80%;}
.set-box {width: 80%;place-self: center;}
.set-sub-box {
  padding: 1.5rem;
  margin: 0;
}
.set-card{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  border:2px solid #efefef;
  border-radius:32px;
  background:#fff;
  overflow:hidden;
  height: clamp(280px, 32vw, 460px);
}

.set-visual{
  flex: 1 1 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  background:#f5f5f7;
}

.set-visual.has-gray{ border-radius:0; }

.set-img{
  max-width:80%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  image-rendering:-webkit-optimize-contrast;
}


.set-copy{
  flex: 1 1 50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  text-align:left;
  padding:35px;
}

.set-title{font-size:18px;font-weight:700;margin:0}
.set-dash{color:#FB4949;font-weight:700;margin:8px 0;line-height:1;}
.set-list{margin:0;padding:0;list-style:none;line-height:1.6;color:#555;font-size:14px;}
.set-list li{padding-left:0;}
.set-list li::before{content:none;}

@media (max-width: 768px){
  .set-card{
    flex-direction:column;
    height:auto;
  }
  .set-visual{
    width:100%;
    min-height:200px;
  }
  .set-copy{
    align-items:flex-start;
    text-align:left;
    padding:20px;
  }
}



/* 동물약국 개설방법 및 주의사항 */
.img-100 {
	visibility: visible;
  image-rendering: -webkit-optimize-contrast;
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0px auto;
}

.img-90 {
	visibility: visible;
	image-rendering: -webkit-optimize-contrast;
	display: inline-block;
  width: 90%;
  height: 100%;
	margin: 0px auto;
}

.img-80 {
	visibility: visible;
	image-rendering: -webkit-optimize-contrast;
	display: inline-block;
  width: 80%;
  height: 100%;
	margin: 0px auto;
}

.img-70 {
	visibility: visible;
	image-rendering: -webkit-optimize-contrast;
	display: inline-block;
  width: 70%;
  height: 100%;
	margin: 0px auto;
}

.oyev-head{position:relative; display:flex;align-items:center;justify-content:space-between;gap:12px}

/* 주의사항 툴팁 */
.oyev-tip[hidden]{display:none}
.oyev-tip{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:3;
  width:min(92vw, 720px);
}

/* 카드 */
.oyev-tip-card{
  position:relative;
  background:#fff;
  border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.14);
  border:1px solid #eee;
  padding: 4rem;
  /* max-height:min(60vh, 480px); */
  /* overflow:auto; */
}


.oyev-tip-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.oyev-tip-title{margin:0;font-size:22px;font-weight:700}
.oyev-tip-close{border:0;background:transparent;font-size:18px;cursor:pointer}

.oyev-tip-body{font-size:14px;color:#333}

@media (max-width:768px){
  .oyev-tip{left:0; right:auto; width:calc(100vw - 24px)}
  .oyev-tip-card::before{right:32px}
}

.oyev-title{margin:0;font-size:28px;font-weight:500}
.oyev-alert-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:#afafaf;cursor:pointer}
.oyev-alert-ico{font-style:normal;color:#999}
.oyev-line{display:flex;flex-wrap:wrap;gap:14px 24px;border-bottom:1px solid #e8e8e8;padding-bottom:20px}
.oyev-offline{display:flex;flex-wrap:wrap;gap:14px 24px;padding-bottom:20px}
.oyev-item{font-size:18px;position:relative;display:flex;align-items:center;gap:8px;line-height:1.9}

.oyev-key{color:#ed4c34;font-weight:700}
.oyev-val{color:#222}
.oyev-link{font-weight:700;text-decoration:underline}
@media (max-width:768px){.oyev-title{font-size:22px}.oyev-line{gap:8px 16px}}


/* 오프라인 개설  */
.offline-steps {
  text-align: center;
  position: relative;
  margin-top: 40px;
}

.oyev-step-track {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  padding: 0 20px;
}

.oyev-step-track::before {
  content: "";
  position: absolute;
  top: 175px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: #ddd;
  z-index: 1;
}

.oyev-step-item {
  position: relative;
  z-index: 2;
  width: 33.33%;
}

.oyev-step-icon {
  width: 150px;
  height: 150px;
  display: inline-block;
  background: #f5f5f5;
  padding: 2rem;
  border-radius: 60px;
  margin-bottom: 5rem;
}

.oyev-step-title {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.oyev-step-main {
  margin: 6px 0 4px;
  font-weight: 700;
  color: #222;
  line-height: 1.5;
}

.oyev-step-desc {
  margin: 0;
  font-size: 12px;
  color: #999;
  line-height: 1.4;
}

.oyev-step-item.active .oyev-step-title,
.oyev-step-item.active .oyev-step-main {
  color: #e11d2e;
  font-weight: 700;
}

.oyev-step-item::after {
  content: "";
  position: absolute;
  top: 170px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: #333;
  border-radius: 50%;
  z-index: 3;
}
.oyev-step-item.active::after {
  background: #e11d2e;
}

/* 반응형 */
@media (max-width:768px){


  .oyev-step-track { flex-direction: column; align-items: center; }
  .oyev-step-track::before { display:none; }
  .oyev-step-item { width:100%; margin-bottom:30px; }
}



.text-table {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
}
.text-table th, .text-table td {
	border: 1px solid #ddd;
	padding: 8px;
	color: #373737;
	letter-spacing: -1px;
	line-height: 1.5;
}
.text-table th {
	background: #777377;
	color: #fff;
	font-weight: bold;
}
.text-table .small {
	font-size: 12px;
	color: #999;
	text-align: right;
}

.red-check-icon{
	width: 16px;
	max-width: 100%;
	margin: 5px 0;
	vertical-align: middle !important;
	display: inline-block;
  float: none;
	position: relative;
}

.internet-call-icon{
	width: 23px;
  max-width: 100%;
  margin-right: 0.5rem;
  vertical-align: middle !important;
  display: inline-block;
  float: none;
  position: relative;
}

.animal-pharmacy-text {
	font-size: 18px;
}

.online-open-img01 {
	visibility: visible;
  image-rendering: -webkit-optimize-contrast;
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0px auto;
}

.online-open-img02 {
	visibility: visible;
	image-rendering: -webkit-optimize-contrast;
	display: inline-block;
  width: 80%;
  height: 100%;
	margin: 0px auto;
}

.online-open-img03 {
	visibility: visible;
  image-rendering: -webkit-optimize-contrast;
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0px auto;
}

.online-open-img04 {
	visibility: visible;
  image-rendering: -webkit-optimize-contrast;
  display: inline-block;
  width: 80%;
  height: 100%;
  margin: 0px auto;
}

.online-open-img05 {
	visibility: visible;
  image-rendering: -webkit-optimize-contrast;
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0px auto;
}

.online-open-img06 {
	visibility: visible;
  image-rendering: -webkit-optimize-contrast;
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0px auto;
}

.offline-open-img01 {
	visibility: visible;
	image-rendering: -webkit-optimize-contrast;
	display: inline-block;
  width: 100%;
  height: 100%;
	margin: 0px auto;
}

.online-open-row {
	margin: 0 10rem !important;
}

.offline-open-row {
  margin: 0 16rem !important;
}

.offline-open-img{
	visibility: visible;
	image-rendering: -webkit-optimize-contrast;
	display: inline-block;
	width: auto;
	height: 160px;
	margin: 0px auto;
}


/* 픽업 예약 서비스 */
.step-icon {
  visibility: visible;
  image-rendering: -webkit-optimize-contrast;
  display: inline-block;
  width: auto;
  height: 50px;
  margin: 0px auto;
}

.step1-img{
  visibility: visible;
  image-rendering: -webkit-optimize-contrast;
  display: inline-block;
  width: auto;
  height: 150px;
  margin: 0px auto;
}

.step2-img{
  visibility: visible;
  image-rendering: -webkit-optimize-contrast;
  display: inline-block;
  width: auto;
  height: 500px;
  margin: 0px auto;
}

.step3-img{
  visibility: visible;
  image-rendering: -webkit-optimize-contrast;
  display: inline-block;
  width: auto;
  height: 350px;
  margin: 0px auto;
}

.between-box{
  display: flex;
  justify-content: space-evenly;
}

.step3-text{
  font-size: 40px;
}

.step3-sub-text{
  font-size: 30px;
}

.step3-s-sub-text{
  color: rgb(171, 98, 98);
    padding: 3rem;
    text-align: left;
}

.faq-icon{
  width: 82px;
}

.svc-faq {
  width:55%;
  place-self: center;
}

.svc-faq-item {
  display: flex;
  padding: 50px 10px;
  border-top: 2px solid #e7e7e7;
}

.svc-faq-q {
  flex: 0 0 240px;
  font-weight: 700;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  white-space: nowrap;
  font-size: 22px;
  align-items: center;
}

.svc-faq-label {
  font-weight: 700;
}

.svc-faq-question {
  line-height: 1.2;
  text-align: left;
}

.svc-faq-a {
  flex: 1;
  line-height: 1.5;
  color: #383838;
  font-size: 19px;
  text-align: left;
  align-content: center;
}

.svc-faq-a strong {
  font-weight: 700;
}


.border-bottom-gray2{
	border-bottom: 2px solid #e7e7e7;
}

/* --------------------------------
   form
-------------------------------- */
.btn-auth {
  width: 26%;
  background-color: #504d4d;
  border-radius: 5px;
  color: #fff;
  padding: 0rem;
  margin-left: 0.5rem;
  font-size: 14px;
}
.btn-auth:disabled,
.btn-auth:hover,
.btn-auth:focus,
.btn-auth:active:focus,
.btn-auth.active:focus,
.btn-auth.focus,
.btn-auth:active.focus,
.btn-auth.active.focus{
  background-color: #504d4d !important;
  color: #fff !important;
}

.form-control:focus { box-shadow: unset !important;border-color: #fc5050; }
.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
}
.form-control,
.board-head .input-group .form-control:not(:first-child):not(:last-child),
.body .order_wrap input.form-control[readonly],
.form-widget .phonenumber_wrap .chosen-container-single .chosen-single {
  color: #212121;
  background: #ffffff;
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
}
input.form-control, textarea.form-control { -webkit-appearance: none !important; }
select.form-control {
  -moz-appearance: none;
  -webkit-appearance: none;
  position: relative;
  z-index: 9;
}
select.form-control option { color: #000 !important; background: #fff; }


/* Modal */
.modal-detail {
    display: none;
    position: fixed;
    z-index: 1003;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
}

.modal-content-detail {
  margin: 3% auto;
  background: #fff;
  width: 30%;
  height: unset;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 10px;
  text-align: center;
  position: relative;
}
.modal-detail-title {
  font-weight: bold;margin-bottom:1rem;
}

.close-detail { position: absolute; right: 10px; top: 3px; font-size: 30px; cursor: pointer; }
.close-detail-reservation { position: absolute; right: 20px; top: 10px; font-size: 30px; cursor: pointer; }

.close-img {
  width:30px;
}

.modal-detail-info{ width: 100%;padding: 0 1rem;margin-bottom:1rem;}
.modal-detail-body { margin: 0; }

@media (max-width: 991px) {

  input.form-control, textarea.form-control { -webkit-appearance: none !important; }

  .modal-content-detail {
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
}

/* wide 모달 */
.wide-module-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

.wide-module-modal.is-open {
  display: flex;
}

.wide-module-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

.wide-module-modal__dialog{
  position: relative;
  z-index: 1;
  background: #fff;
  width: 100%;
  max-width: 1000px;
  border-radius: 20px;
  padding: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

.wide-module-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
}

.wide-module-skin{
  margin: 0 auto 0;
  width: 100%;
  max-width: 100%;
  background:#fff;
}

.wide-module-card{
  background:#fff;
  padding: 0 20px 20px 20px;
  height: 800px;
  overflow: auto;
  overflow-x: hidden;
}

.itemdetail-layout{
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.itemdetail-left{
  position: relative;
}
.itemdetail-thumb{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}
.itemdetail-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius:12px;
}
.itemdetail-thumb.soldout img {
  filter: brightness(0.5);
}
/* item detail */
.itemdetail-badge-box{
  position: absolute;
  top: 15px;
  right: 15px;
}

.itemdetail-badge-m {
    width: 36px !important;
    height: 36px !important;
    margin-right: 5px;
    z-index: 3;
    pointer-events: none;
    /* display:none !important; */
}

.itemdetail-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 46px !important;
    height: 46px !important;
    z-index: 3;
    pointer-events: none;
    /* display:none !important; */
}
/* item detail rcmd */
.itemdetail-rcmd-badge {
  width: 24px !important;
  display: inline !important;
  margin-bottom: 7px !important;
  margin-left: 5px;
  /* display:none !important; */
}

.itemdetail-thumb-overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: 500;
    font-size: 20px;
    text-align: center;
    z-index: 2;
    pointer-events: none;
}

.itemdetail-right{
  position: relative;
}

.itemdetail-right .itemdetail-title{
  font-size: 22px;
  font-weight: 500;
}

.itemdetail-meta{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.itemdetail-chip{
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: 13px;
  background: #fce9e3;
  color: #f04b1d;
  padding: 5px;
  border-radius: 5px;
}

.m-itemdetail-chip{
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: 13px;
  background: #fce9e3;
  color: #f04b1d;
  padding: 5px;
  border-radius: 5px;
}

.itemdetail-row{
  margin: 10px 0;
  font-size: 15px;
  line-height: 1.55;
}

.itemdetail-row strong{
  display:block;
  margin-bottom: 4px;
  font-size: 14px;
  color:#111827;
}

.itemdetail-detail{
  grid-column: 1 / -1;
  margin-top: 1rem;
}

.itemdetail-detail img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}
.itemdetail-detail-empty{
  padding: 18px;
  border: 1px dashed #e5e7eb;
  border-radius: 14px;
  text-align: center;
  color: #6b7280;
  background: #fafafa;
  font-size: 14px;
}

.itemdetail-detail-wrap{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #fff;
}


.itemdetail-detail-wrap.is-collapsed{
  max-height: 520px;
}


.itemdetail-detail-wrap.is-expanded{
  max-height: none;
}


.itemdetail-detail-img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}


.itemdetail-detail-fade{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 250px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events: none;
  opacity: 0;
}
.itemdetail-detail-wrap.is-collapsed .itemdetail-detail-fade{
  opacity: 1;
}


.itemdetail-price{
  font-size: 2rem;
  color:#ed3632;
  font-weight: 700;
}
.itemdetail-promotion{
  font-size: 1.7rem;
  color:#7c66ff;
  font-weight: 500;
}


/* 토글 버튼 */
.itemdetail-detail-toggle{
  margin-top: 12px;
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
}

.itemdetail-actions{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 10px;
}

/* 버튼 바 전체 */
.itemdetail-cta-bar{
  display: grid;
  grid-template-columns: 2fr 8fr;
  gap: 10px;
  margin-top: 16px;
  align-items: center;
}

/* 찜 버튼 (왼쪽) */
.itemdetail-like-btn{
  width: 100%;
  height: 45px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}


.itemdetail-like-img{
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* 예약 버튼 */
.itemdetail-reserve-btn{
  width: 100%;
  height: 45px;
  border: none;
  border-radius: 6px;

  background-color: #fc5050;
  color: #fff;
  font-size: 15px;
  font-weight: 700;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  cursor: pointer;
}

.itemdetail-reserve-btn-icon{
  width: 20px;
  height: 20px;
}

@media (max-width: 768px){


  .wide-module-skin {
    width: 100%;
    max-width: 100%;
    padding: 0px;
    margin-top: 20px;
    background: #fff;
  }
  .wide-module-skin form {
    width: 100%;
  }

  .itemdetail-layout{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .itemdetail-thumb{ aspect-ratio: 16 / 12; }
  .itemdetail-actions{
    align-items: stretch;
  }
  .itemdetail-reserve-btn{
    width: 100%;
  }
}

/* 상품 상세 페이지 모달 내 상단 고정바(스크롤시 보임) */
.itemdetail-stickybar{
  position: sticky;
  top: 0;
  z-index: 50;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding: 14px;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;

  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;

  transition: max-height .2s ease, opacity .2s ease, transform .2s ease;
}

.itemdetail-stickybar.is-show{
  max-height: 80px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 레이아웃 */
.idsb-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.idsb-thumb{
  width: 40px; height: 40px;
  border-radius: 12px;
  object-fit: cover;
  background:#f1f5f9;
  flex:0 0 auto;
}
.idsb-info{ min-width:0; }
.idsb-name{
  font-size: 13px;
  font-weight: 800;
  color:#0f172a;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 46vw;
}
.idsb-price{
  margin-top: 3px;
  font-size: 13px;
  font-weight: 800;
  color:#1d4ed8;
}

.it_zzim_box{
  color: #8d8d8d;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
}

/* 버튼 */
.idsb-right{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.idsb-btn{
  height: 38px;
  border-radius: 999px;
  cursor:pointer;
  border: 1px solid rgba(15,23,42,.12);
  background:#fff;
  font-size: 13px;
  font-weight: 800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0 14px;
}
.idsb-wish{
  width: 38px;
  padding:0;
}
.idsb-heart{
   width:20px;

  }

.idsb-reserve{
  border: 0;
  color:#fff;
  background: #fc5050;
}

/* 관련 상품 */
.itemdetail-rcmd-block{ margin-top:1rem; grid-column: 1 / -1;}
.itemdetail-rcmd-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.itemdetail-rcmd-title{
  font-size:16px; font-weight:800;
}
.itemdetail-rcmd-more{
  font-size:12px; color:#64748b; font-weight:700;
}

.itemdetail-rcmd-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}

.itemdetail-img-cat-dog {
	width: 33px !important;
  display: inline !important;
  margin-bottom: 7px !important;
  margin-left: 5px;
}

.rcmd-card{
  width:100%;
  display:flex;
  gap:10px;
  padding:10px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  text-align:left;
  cursor:pointer;
}
.rcmd-card:active{ transform: translateY(1px); }

.rcmd-thumb-box{
  display: flex;
  gap: 5px;
}

.rcmd-thumb{
  position:relative;
  width:64px; height:64px;
  flex:0 0 64px;
  border-radius:12px;
  overflow:hidden;
  background:#f1f5f9;
}
.rcmd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.rcmd-badge{
  position:absolute; right:6px; top:0px;
  font-size:11px; font-weight:800;
  padding:3px 6px;
  border-radius:999px;
  background:#fc5050;
  color:#fff;
}
.rcmd-soldout{
  position:absolute; inset:auto 6px 6px 6px;
  font-size:11px; font-weight:800;
  padding:4px 6px;
  border-radius:10px;
  background:rgba(0,0,0,0.55);
  color:#fff;
  text-align:center;
}

.rcmd-info{ min-width:0; display:flex; flex-direction:column; justify-content:center; }
.rcmd-name{
  font-size:15px; font-weight:500; color:#0f172a;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.rcmd-price{ margin-top:4px; font-size:14px; color:#FB4949; font-weight:500; }
.rcmd-promotion{ margin-top:4px; font-size:14px; color:#7c66ff; font-weight:500; }

.itemdetail-tag-description-text {
	color: #888888;
  font-size: 1.5rem;
}

.itemdetail-mcta {
  display:none;
}
@media (max-width: 420px){
  .rcmd-thumb{ width:72px; height:72px; flex-basis:72px; }
}

@media (max-width: 768px){
  .itemdetail-chip {
      padding: 3px;
      font-size: 9px;
  }

	.wide-module-modal__dialog{
		height: 100%;
		border-radius: 0px;
		padding: 10px;
	}

	.itemdetail-rcmd-grid{ grid-template-columns: 1fr 1fr; }
	.rcmd-card{display: block;}
	.wide-module-card{ padding: 5px; height: 92vh;}
	.itemdetail-right .itemdetail-title {
	    font-size: 20px;
	}
	.itemdetail-img-cat-dog{
		width: 24px !important;
		margin-bottom: 0 !important;
	}
	.itemdetail-row{
		margin: 5px 0;
    line-height: 1.3;
	}
	.itemdetail-tag-description-text {
	  font-size: 12px;
	}
	.itemdetail-cta-bar{display:none;}
}


/* 위로가기버튼 */
.itemdetail-topbtn{
  position: fixed;
  right: 26%;
  bottom: 5%;
  z-index: 9999;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: block;
}

.itemdetail-topbtn img{
  width: 44px;
  height: 44px;
  display: block;
  background: rgba(255, 255, 255, 0.6);
  border: 3px solid #333;
}

@media (max-width: 768px){
  .itemdetail-topbtn{
    right: 14px;
    bottom: 88px;
  }
  .itemdetail-topbtn img{
    width: 40px;
    height: 40px;
  }
}