:root{
  --dm-bg:#f6f7f9;
  --dm-surface:#ffffff;
  --dm-text:#121417;
  --dm-sub:#5b6675;
  --dm-line:#e6e9ee;
  --dm-brand:#7a1414;
  --dm-brand2:#111318;
  --dm-radius:0px;
  --dm-shadow:0 10px 30px rgba(0,0,0,.08);
}
#btnMyLoc{display:none;}
ul,p{margin-bottom:0!important}
.dm-wrap{max-width:1240px;margin:0px auto 25px;padding:0;color:var(--dm-text);font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans KR",sans-serif;}
.dm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px;display:none;}
.dm-title{margin:0;font-size:26px;letter-spacing:-.4px;font-weight:900}
.dm-desc{margin:6px 0 0 0;color:var(--dm-sub);font-size:14px}
.dm-actions{display:flex;gap:10px;flex-wrap:nowrap}

.dm-btn{
  appearance:none;border:1px solid var(--dm-line);background:var(--dm-surface);
  padding:10px 14px;border-radius:0px;font-weight:900;font-size:13px;
  cursor:pointer;transition:.15s ease;white-space:nowrap;
}
.dm-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.08);}
.dm-btn--primary{background:#000;color:#fff;}
.dm-btn--dark{background:var(--dm-brand2);border-color:var(--dm-brand2);color:#fff;}

.dm-tabs{
  display:flex;gap:5px;flex-wrap:wrap;
  background:var(--dm-bg);border:1px solid var(--dm-line);
  padding:10px;border-radius:0px;
}
.dm-tab{
  border:1px solid transparent;background:transparent;color:var(--dm-sub);
  padding:10px 14px;border-radius:0px;font-weight:1000;font-size:13px;
  cursor:pointer;transition:.15s ease;
}
.dm-tab.is-active{background:#fff;border-color:var(--dm-line);color:var(--dm-text);box-shadow:0 8px 18px rgba(0,0,0,.06);}

.dm-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  align-items:start;
}

.dm-panel{
  background:var(--dm-surface);
  border:1px solid var(--dm-line);
  border-radius:var(--dm-radius);
  box-shadow:var(--dm-shadow);
  overflow:hidden;
}
.dm-panel--list{max-height:740px;display:flex;flex-direction:column;}
.dm-search{display:flex;gap:8px;padding:14px;border-bottom:1px solid var(--dm-line);background:#fff;}
.dm-input{
  flex:1;border:1px solid var(--dm-line);border-radius:0px;
  padding:10px 12px;font-size:14px;outline:none;
}
.dm-input:focus{border-color:rgba(122,20,20,.35);box-shadow:0 0 0 4px rgba(122,20,20,.10);}
.dm-list{list-style:none;margin:0;padding:10px;overflow:auto;}
.dm-list::-webkit-scrollbar{width:10px}
.dm-list::-webkit-scrollbar-thumb{background:#d9dde6;border-radius:0px;border:2px solid #fff}

.dm-item{
  display:grid;grid-template-columns:80px 1fr;
  gap:12px;align-items:center;
  padding:12px;border:1px solid var(--dm-line);
  border-radius:0px;background:#fff;
  cursor:pointer;transition:.15s ease;margin-bottom:10px;
}
.dm-item:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(0,0,0,.08);}
.dm-thumb{
  width:80px;height:80px;border-radius:0px;
  background:linear-gradient(135deg, rgba(122,20,20,.20), rgba(17,19,24,.10));
}
.dm-top{display:flex;gap:8px;align-items:center;margin-bottom:0px;}
.dm-badge{
  font-size:11px;font-weight:1000;
  color:#FC5558;
  padding:0px;border-radius:0px;
}
.dm-name{font-size:14px;font-weight:1000;}
.dm-addr{font-size:12px;color:var(--dm-sub);line-height:1.4;}
.dm-meta{font-size:12px;color:var(--dm-sub);margin-top:4px;}
.dm-cta{
  justify-self:end;
  font-weight:1000;font-size:12px;
  color:#fff;background:var(--dm-brand2);
  padding:10px 10px;border-radius:0px;
}

.dm-panel--map{position:relative;}
#map{width:100%;height:740px;background:#f0f2f5;}
.dm-mapOverlay{
  position:absolute;inset:0;display:none;
  align-items:center;justify-content:center;padding:22px;text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.98));
}
.dm-mapOverlay__box{
  max-width:560px;background:#fff;border:1px solid var(--dm-line);
  border-radius:0px;box-shadow:0 18px 45px rgba(0,0,0,.12);
  padding:18px;
}
.dm-mapOverlay__title{font-size:16px;font-weight:1000;margin:0 0 8px 0}
.dm-mapOverlay__desc{margin:0;color:var(--dm-sub);font-size:13px;line-height:1.55}
.dm-mapOverlay__hint{
  margin-top:12px;padding:12px;border-radius:0px;
  background:rgba(122,20,20,.06);border:1px dashed rgba(122,20,20,.25);
  font-size:12px;color:#3a3f47;text-align:left;white-space:pre-wrap;
}

.dm-panel--reserve{max-height:740px;display:flex;flex-direction:column;}
.dm-resHead{padding:16px;border-bottom:1px solid var(--dm-line);background:#fff;}
.dm-resTitle{font-size:18px;font-weight:1000;margin:0}
.dm-resSub{margin:6px 0 0 0;color:var(--dm-sub);font-size:13px}
.dm-resBody{padding:14px;overflow:auto;}
.dm-resFooter{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:14px;border-top:1px solid var(--dm-line);background:#fff;
}
.dm-quick{
  display:flex;align-items:center;justify-content:center;
  padding:12px;border-radius:0px;font-weight:1000;text-decoration:none;
}
.dm-quick--call{background:#111318;color:#fff;}
.dm-quick--kakao{background:#fee500;color:#111;}
.modal{ z-index: 99999 !important; }
#modalContent {border:0!important;padding:0!important;background:none!important;}

/* ===== Bottom Sheet (offcanvas) ===== */
.dm-sheet{
  height: 65vh!important; /* 펼쳤을 때 높이 */
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  overflow: hidden;

  /* Bootstrap offcanvas transform을 우리가 제어 */
  transform: translateY(calc(100% - var(--dm-peek, 64px))) !important;
  transition: transform 260ms ease;
  visibility: visible !important;
  display: block !important;
}

.dm-sheet.is-expanded{
  transform: translateY(0) !important;
}

.dm-sheetbar{
  position: sticky;
  top: 0;
  background:#941010;
  border-bottom: 1px solid #eee;
  height: var(--dm-peek, 64px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 14px;
  cursor: pointer;
}
.map_info button,
.map_info a{
  width:100%;
  padding:6px 0;                 /* 세로 높이 통일 */
  background:#333;
  color:#fff;
  margin:2px;
  text-align:center;

  display:inline-flex;           /* 핵심: 동일 레이아웃 */
  align-items:center;            /* 세로 중앙정렬 */
  justify-content:center;        /* 가로 중앙정렬 */

  line-height:1;                 /* 글줄 높이 통일 */
  min-height:34px;               /* 버튼 높이 고정(원하는 값으로) */
  box-sizing:border-box;

  border:1px solid #333;
  border-radius:6px;
  text-decoration:none;          /* a 밑줄 제거 */
  cursor:pointer;

  -webkit-appearance:none;       /* button 기본 스타일 제거 */
  appearance:none;
}

.map_info button{
  background:#333;
}

.map_info a{
  background:#333;
}


.dm-iw{
  display:inline-block;
  background:transparent;
  padding:0;
  margin:0;
  line-height:0;
  transform: translateY(-18px);   /* 위로 띄우기 */
}

.dm-iw__inner{
  background:#fff;
  border:1px solid #000;
  box-sizing:border-box;
  line-height:1.2;
  position:relative;             /* 꼬리 붙일 때 필요 */
}

/* 선택: 꼬리 */
.dm-iw__inner:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:14px;
  height:14px;
  background:#fff;
  border-right:1px solid #000;
  border-bottom:1px solid #000;
  transform: translateX(-50%) rotate(45deg);
}

#modalRegion {padding:2px 8px; background:#FC5558;color:#fff;border-radius:999px;font-size:12px;}
#modalPermit{display:none;}
#branchCanvasLabel{color:#fff!important;font-size:17px;}
.toggleIcon{color:#fff;}
.dm-sheetbar__handle{
  position:absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: rgba(0,0,0,0);
}

.dm-sheetbar__title{
  display:flex;
  align-items:baseline;
  gap:8px;
}

.dm-countPill{
  font-weight: 900;
  font-size: 12px;
  color:#7a1414;
  background: #fff;
  border: 1px solid rgba(122,20,20,.18);
  padding: 3px 8px;
  border-radius: 999px;
}

.dm-sheetbar__chev{
  border:0;
  background:transparent;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.dm-sheetbar__chev span{
  display:inline-block;
  transition: transform 260ms ease;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}

.dm-sheet.is-expanded .dm-sheetbar__chev span{
  transform: rotate(180deg);
}

/* ✅ 헤더를 제외한 나머지 영역이 스크롤 되도록 */
.dm-sheet .offcanvas-body{
  height: calc(100% - var(--dm-peek, 64px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ✅ ul 자체는 스크롤 안 잡고, body가 스크롤을 담당 */
.dm-sheet .dm-list{
  overflow: visible;
}
.offcanvas {margin:0 auto!important;max-width:700px;}

/* 모바일에서 지도 하단이 시트에 가리지 않게 여백 */
@media (max-width: 820px){
  .dm-panel--map{ padding-bottom: 0px; }
}


@media (max-width: 1100px){
  .dm-grid{grid-template-columns:1fr;}
  .dm-panel--reserve{grid-column:1 / -1;max-height:none;}
  #map{height:560px;}
}
@media (max-width: 820px){
  .dm-grid{grid-template-columns:1fr;}
  .dm-panel--list{display:none;}
  #map{height:56vh;}
}
@media (max-width: 991.98px){
	.offcanvas {display:block!important;}
}


/* =========================================================
   Bootstrap MIN CSS (Offcanvas + Modal only)
   - 전역 태그(reset/reboot) 없음
   - 이 페이지에서 필요한 컴포넌트만 정의
========================================================= */

/* Backdrop */
.modal-backdrop,
.offcanvas-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1040;
}
.modal-backdrop.fade,
.offcanvas-backdrop.fade{ opacity: 0; }
.modal-backdrop.show,
.offcanvas-backdrop.show{ opacity: 1; }

/* Modal */
.modal{ position: fixed; inset: 0; z-index: 1055; display:none; overflow:hidden; outline:0; }
.modal.show{ display:block; }
.modal-dialog{ position: relative; width: auto; margin: 1rem; pointer-events:none; }
.modal.modal-dialog-centered .modal-dialog{ display:flex; align-items:center; min-height: calc(100% - 2rem); }
.modal-content{ position:relative; display:flex; flex-direction:column; width:100%; pointer-events:auto; background:#fff; background-clip:padding-box; outline:0; }
.modal-header, .modal-footer{ display:flex; align-items:center; justify-content:space-between; padding: .75rem 1rem; }
.modal-header{ border-bottom: 1px solid rgba(0,0,0,.08); }
.modal-footer{ border-top: 1px solid rgba(0,0,0,.08); gap:.5rem; justify-content:flex-end; }
.modal-title{ margin:0; line-height:1.2;font-size:20px; }
.modal-body{ position:relative; flex:1 1 auto; padding: 1rem; overflow:auto; }

/* Fade animation */
.fade{ transition: opacity .15s linear; }
.fade:not(.show){ opacity: 0; }
.modal.fade .modal-dialog{ transition: transform .15s ease-out; transform: translate(0,-20px); }
.modal.show .modal-dialog{ transform: none; }

/* Offcanvas (bottom) */
.offcanvas{ position: fixed; bottom:0; left:0; right:0; z-index: 1050; display:flex; flex-direction:column; max-height: 100%; background:#fff; outline:0; transform: translateY(100%); visibility:hidden; }
.offcanvas.show{ transform: none; visibility: visible; }
.offcanvas-header{ display:flex; align-items:center; justify-content:space-between; padding: .75rem 1rem; border-bottom:1px solid rgba(0,0,0,.08); }
.offcanvas-body{ flex:1 1 auto; padding: 10px; overflow:auto; }

/* Close button */
.btn-close{
  box-sizing: content-box;
  width: 1em; height: 1em;
  padding: .25em;
  color: #000;
  border: 0;
  border-radius: .25rem;
  background: transparent;
  opacity: .65;
  cursor: pointer;
}
.btn-close:hover{ opacity: 1; }
.btn-close::before{
  content:"";
  display:block;
  width: 1em; height: 1em;
  background:
    linear-gradient(45deg, transparent 46%, #000 47%, #000 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, #000 47%, #000 53%, transparent 54%);
}

/* Modal/Offcanvas Scroll lock (Bootstrap JS가 body에 붙임) */
body.modal-open{ overflow:hidden; }

/* 유틸(현재 코드에서 사용 중인 일부 클래스 대체) */
.d-flex{ display:none !important; } /*허가번호, 지역*/
.flex-wrap{ flex-wrap:wrap !important; }
.gap-2{ gap:.5rem !important; }
.mb-2{font-size:15px;text-align:center;}
.dm-sheet-row .mb-2 {display:flex;justify-content:flex-end;}
.dm-sheet-row .mb-3 {display:flex;}
.mb-3{ margin-bottom:1rem !important; }
.mb-2 a, .mb-3 a{width:150px;padding:10px 15px; border:1px solid #901010;display:flex;margin:10px 5px;font-size:15px;border-radius:999px;justify-content:center;}
.mb-3 a {border:1px solid #2DB400;color:#fff;background:#2DB400;font-weight:800;}
.dm-sheet-row{
  display:flex;
  align-items:center;
}

.dm-sheet-row .mb-2,
.dm-sheet-row .mb-3{
  flex:1;               /* 2분할 */
  margin-bottom:0 !important;  /* 세로 여백 제거 */
  font-size:15px;
}

/* 버튼이 오른쪽 칸에서 오른쪽으로 붙게 */


/* modal-lg 흉내(가로폭) */
@media (min-width: 992px){
  .modal-lg{ max-width: 900px; margin-left:auto; margin-right:auto; }
}

/* ✅ 상단 권역 탭: 버튼형 + 중앙정렬 */
.dm-tabs{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}

.dm-tab{
  appearance:none;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:999px;
  padding:10px 16px;
  font-weight:800;
  line-height:1;
}

.dm-tab.is-active{
  background:#111;
  color:#fff;
  border-color:#111;
}

/* ✅ 모바일 지점명(서브탭) */
.dm-subtabs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.dm-subtab{
  flex:0 0 auto;
  border:0;
  background:#fff;
  padding:6px 10px;
  color:#888;
  font-size:13px;
  white-space:nowrap;
}

/* ✅ 시트 breadcrumb */
.dm-sheetbar__crumb{
  display:flex;
  align-items:center;
  gap:8px;
}

.dm-crumb{
  border:0;
  background:transparent;
  padding:0;
  font-weight:500;
  cursor:pointer;
  font-size:18px;
  color:#fff;
}

.dm-sheetbar__crumb .dm-crumbSep {
	
	font-size:18px;
	color:#fff;
	
}

.dm-crumbBranch{
  font-weight:600;
  color:#fff;
  font-size:18px;
  opacity:.9;
}

/* ✅ 모바일 상세 갤러리 */
.dm-sheetGallery img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:10px;
  margin:0 0 10px 0;
}

/* =========================================================
   Branch Bottom Sheet (Offcanvas) - FINAL
   목표:
   - "시트 전체" 폭이 최대 700px (헤더/바디 포함)
   - 높이: 화면 80%
   - 모바일(<= 991.98px)에서만 margin-bottom: 94px
   - Bootstrap show/hide transform(Y축) 방해 금지 (중요)
   ========================================================= */

/* 0) 전역 .offcanvas 건드리는 규칙이 있으면 삭제 권장 */
/* .offcanvas { margin:0 auto!important; max-width:700px; }  ← 이런 것 금지 */

/* 1) 컨테이너: 폭 제한(전체), 높이 제한 */
#branchCanvas.offcanvas{
  /* ✅ 전체 폭을 최대 700px로 제한 (헤더 포함) */
  max-width: 700px;
  /*width: calc(100vw - 24px);     /* 화면 가장자리 여백 확보 */
  /*left: 12px;                    /* 좌우 여백: 12px */
  /*right: 12px;                   /* 좌우 여백: 12px */
  margin-left: auto;
  margin-right: auto;

  /* ✅ 높이 80% */
  max-height: 80dvh;

  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  overflow: hidden;

  /* ✅ 절대 transform 건드리지 말 것 (Bootstrap이 show/hide에 사용) */
}

@supports not (height: 1dvh){
  #branchCanvas.offcanvas{ max-height: 80vh; }
}

/* 2) 모바일(<= 991.98px)에서만 하단 여백 */
@media (max-width: 991.98px){
  #branchCanvas.offcanvas{
    margin-bottom: 94px;
  }
}

/* 3) offcanvas-body 스크롤 */
#branchCanvas.offcanvas .offcanvas-body{
  overflow: auto;
  padding-bottom: 18px;
}

/* 4) inner는 더 이상 폭 제한을 하지 않아도 됨(패딩만 유지하고 싶으면 OK) */
@media (max-width: 991.98px){
  #branchCanvas.offcanvas{
    /* ✅ 하단 94px 띄우기: margin이 아니라 bottom */
    bottom: calc(94px + env(safe-area-inset-bottom)) !important;

    /* ✅ 높이 80% 유지하면서, 아래로 띄운 만큼 높이에서 빼기 */
    max-height: calc(80dvh - 94px - env(safe-area-inset-bottom)) !important;
  }
  .mb-2 a, .mb-3 a{width:120px;font-size:12px;}
  #branchCanvasLabel, .dm-countLabel, .dm-crumbBranch {font-size:15px;}
}

/* dvh 미지원 fallback */
@supports not (height: 1dvh){
  @media (max-width: 991.98px){
    #branchCanvas.offcanvas{
      max-height: calc(80vh - 94px - env(safe-area-inset-bottom)) !important;
    }
	
  }
}