:root{
  --ink:#111827; --muted:#6b7280; --line:#e5e7eb;
  --bg:#f9fafb; --panel:#ffffff;
  --pri:#2563eb; --pri-ink:#fff;
  --radius:14px;
  --slide-h-sm:260px;  /* 모바일 */
  --slide-h-md:360px;  /* 태블릿 */
  --slide-h-lg:400px;  /* 데스크탑 */
  
  --actionbar-h: 64px; /* 고정바 실제 높이에 맞춰 조정 */  --actionbar-h: 64px; /* 고정바 실제 높이에 맞춰 조정 */

  /* Image Viewer */
  --imgv-gutter:0px;            /* 모바일 좌우 여백 */
  --imgv-nav-size:44px;         /* 터치 타깃 */
  --imgv-fade-w:64px;           /* 좌우 페이드 폭 */
  --imgv-nav-bg:rgba(17,24,39,.55);
  --imgv-nav-ink:#fff;
}
@media (min-width:768px){
  :root{ --imgv-gutter:40px; --imgv-nav-size:52px; --imgv-fade-w:96px; }
}

/* 전체 레이아웃 */
.equip{max-width:1200px;margin:0 auto;padding:15px 5px;}
@media (min-width:768px){ .equip{padding:0px 16px 24px;} }

/* 헤더 */
.equip-header{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.equip-breadcrumb{font-size:13px;color:var(--muted);}
.equip-breadcrumb .sep{margin:0 6px;color:#9ca3af;}
.equip-titleline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.equip-title{font-size:22px;line-height:1.25;margin:0;color:var(--ink);font-weight:800;}
@media (min-width:768px){ .equip-title{font-size:26px;} }

/* 배지 */
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;line-height:1;background:#eef2ff;color:#374151;border:1px solid var(--line);}
.badge--muted{background:#f3f4f6;color:#6b7280;}
.badge--red{background:#fee2e2;color:#fff;border-color:#fecaca;}
.badge--gray{background:#e5e7eb;color:#374151;border-color:#d1d5db;}
.badge--blue{background:#dbeafe;color:#1e3a8a;border-color:#bfdbfe;}

/* 본문 2열 (모바일 1열) */
.equip-body{display:grid;grid-template-columns:1fr;gap:16px;margin-top:8px;}
@media (min-width:992px){ .equip-body{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;} }
.equip-body > * { min-width:0; } /* slick grid 버그 방지 */

/* ───────────── 갤러리 ───────────── */
.equip-media{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px;
  position:relative;
}
.gallery-main{ width:100%; border-radius:12px; overflow:visible; }
.gallery-main,
.gallery-main .slick-list,
.gallery-main .slick-track,
.gallery-main .slide{ height:var(--slide-h-sm); }
.gallery-main .slick-track{ display:flex !important; align-items:stretch; }
.gallery-main .slick-slide{ display:flex !important; align-items:stretch; }
.gallery-main .slide{ position:relative; display:block; width:100%; }

/* 이미지 100% 채움 (비율 유지/크롭) */
.gallery-main .slide img{
  width:auto; height:auto;
  object-fit:cover; object-position:center;
  background:#f3f4f6;
}

/* slick 공통 보정 */
.slick-slider{ touch-action:pan-y; }
.slick-track{ display:flex !important; }
.slick-slide{ height:auto; display:flex; justify-content:center; }
.slick-slide img{ width:100%; height:auto; object-fit:cover; }

/* 썸네일 */
.gallery-thumbs{ margin-top:10px; }
.gallery-thumbs .thumb{
  display:inline-flex; align-items:center; justify-content:center;
  width:110px; height:72px;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:#fff; padding:0; cursor:pointer; margin-right:8px;
  transition:opacity .25s ease, transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  opacity:.2;
}
.gallery-thumbs .thumb:last-child{ margin-right:0; }
.gallery-thumbs .thumb:hover{ opacity:.9; transform:translateY(-2px); border-color:#cbd5e1; }
.gallery-thumbs .thumb img{ width:100%; height:100%; object-fit:cover; background:#f3f4f6; }

/* 썸네일 활성 강조 */
.gallery-thumbs .slick-current .thumb,
.gallery-thumbs .slick-slide.slick-current .thumb,
.gallery-thumbs .thumb.slick-current{
  opacity:1; border-color:var(--pri);
  transform:scale(1.03);
  box-shadow:0 0 4px rgba(37,99,235,0.25);
}

/* 높이 반응형 */
@media (min-width:768px){
  .gallery-main,
  .gallery-main .slick-list,
  .gallery-main .slick-track,
  .gallery-main .slide{ height:var(--slide-h-md); }
  .gallery-thumbs .thumb{ width:120px; height:78px; }
}
@media (min-width:992px){
  .gallery-main,
  .gallery-main .slick-list,
  .gallery-main .slick-track,
  .gallery-main .slide{ height:var(--slide-h-lg); }
  .gallery-thumbs .thumb{ width:130px; height:75px; }
}

/* ───────────── 우측 정보 ───────────── */
.equip-info{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0px;
  overflow:hidden;
}
.equip-meta{width:100%;border-collapse:collapse; margin:0;}
.equip-meta th,.equip-meta td{ padding:8px 12px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle; }
.equip-meta th{ width:120px;white-space:nowrap;color:#374151;background:#f9fafb;font-weight:600; }
.equip-meta tr:last-child th,.equip-meta tr:last-child td{ border-bottom:none; }
.equip-meta td.price{padding:12px;font-size:30px;}

.equip-desc{margin-top:16px;}
.equip-desc h3{font-size:16px;margin:0 0 8px;color:#111827;font-weight:700;}
.equip-desc__body{font-size:14px;line-height:1.6;color:#111827;}

/* 버튼 */
.equip-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding:0 14px;border-radius:10px;
  border:1px solid var(--line);
  background:#fff;color:#111827;font-size:14px;
  cursor:pointer;text-decoration:none;transition:background .15s ease;
}
.btn:hover{background:#011e5f;color:#fff;}
.btn-primary{background:var(--pri);border-color:var(--pri);color:var(--pri-ink);}
.btn-primary:hover{filter:brightness(0.98);}
.btn-outline{background:#fff;border-color:#cbd5e1;color:#1f2937;}

/* ───────────── 추가 섹션 ───────────── */
.equip-extra{display:flex;flex-direction:column; gap:16px; margin-top:16px;}
@media (min-width:992px){ .equip-extra{grid-template-columns:repeat(1,1fr);} }
.card {
  margin: 0px 0 10px;
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--radius, 12px);
  padding: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.descript{min-height:150px;}
.card h3{margin:0 0 8px;color:#111827;font-size:16px;font-weight:700;}
.muted{color:var(--muted);font-size:14px;}
.small{font-size:13px;color:#6b7280;}
.tips,.bullets{margin:6px 0 0 16px;padding:0;}
.tips li,.bullets li{margin:6px 0;font-size:14px;}

/* 정책 리스트 */
.policies{margin:6px 0 0;}
.policies dt{font-weight:700;color:#111827;margin-top:10px;}
.policies dd{margin:4px 0 0;color:#374151;font-size:14px;}

/* ───────────── 등록 이미지 그리드 ───────────── */
.equip-images-grid{
  margin-top:32px;
  background:var(--panel);
  border-radius:var(--radius);
  padding:0;
}
.equip-images-grid h3{ font-size:16px;font-weight:700;color:#111827;margin:0 0 12px; }
.images-wrap{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.images-wrap .img-item{
  display:block; border-radius:10px; overflow:hidden; border:1px solid var(--line);
  transition:transform .15s ease, box-shadow .15s ease;
}
.images-wrap .img-item:hover{ transform:translateY(-3px); box-shadow:0 4px 12px rgba(0,0,0,0.08); }
.images-wrap .img-item img{ width:100%; height:auto; display:block; object-fit:cover; background:#f3f4f6; aspect-ratio:4/3; }
@media (max-width:768px){ 
	.images-wrap{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
	.small {white-space: normal;}
	.equip-meta td.price{padding:12px;font-size:20px;}
	.btn:hover{background:#fff;color:#000;}
}

/* ───────────── TOP 버튼 ───────────── */
#toTopBtn{
  position:fixed;bottom:24px;right:24px;
  width:44px;height:44px;border:none;border-radius:50%;
  background:var(--pri);color:#fff;font-size:20px;cursor:pointer;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:1000;
}
#toTopBtn.show{opacity:1;visibility:visible;}
#toTopBtn:hover{filter:brightness(1.1);}

/* ───────────── Image Viewer (Lightbox) ───────────── */
.imgv-modal{ position:fixed; inset:0; display:none !important; z-index:2147483647; }
.imgv-modal[aria-hidden="false"]{ display:block !important; }
.imgv-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.8); pointer-events:auto; z-index:0; }

.imgv-dialog{
  position:relative; z-index:1; display:flex; flex-direction:column;
  width:min(1200px,96vw); height:min(80vh,100vh);
  margin:3vh auto; background:#111827; border-radius:12px; overflow:hidden;
}
.imgv-header{
  display:flex; align-items:center; justify-content:space-between;
  background:#0f172a; color:#fff; padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.imgv-tools{ display:flex; gap:6px; }
.imgv-btn{
  background:#1f2937; color:#fff;
  border:1px solid rgba(255,255,255,.15); border-radius:8px;
  padding:6px 10px; cursor:pointer;
}
.imgv-btn:hover{ background:#374151; }

.imgv-body{
  position:relative; flex:1 1 auto; min-height:0;
  padding-inline: var(--imgv-gutter);
  display:grid; place-items:center;
  background:#0b1220; overflow:hidden;
}
.imgv-body::before,
.imgv-body::after{
  content:""; position:absolute; top:0; bottom:0; width:var(--imgv-fade-w);
  pointer-events:none; z-index:1;
}
.imgv-body::before{ left:0;  background:linear-gradient(to right, rgba(0,0,0,.45), transparent); }
.imgv-body::after { right:0; background:linear-gradient(to left,  rgba(0,0,0,.45), transparent); }

.imgv-stage{
  position:relative; width:100%; height:100%;
  display:grid; place-items:center; overflow:hidden;
  touch-action:none; overscroll-behavior:contain; cursor:grab;
}
.imgv-stage:active{ cursor:grabbing; }

#imgv-img{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center center;
  max-width:none; max-height:none;
  will-change:transform; -webkit-user-drag:none; user-select:none;
  border-radius:8px; box-shadow:0 8px 30px rgba(0,0,0,.35);
}

.imgv-nav{
  position:absolute; top:50%; translate:0 -50%;
  width:var(--imgv-nav-size); height:var(--imgv-nav-size);
  display:grid; place-items:center; border:0; border-radius:999px; cursor:pointer;
  background:var(--imgv-nav-bg); color:var(--imgv-nav-ink);
  backdrop-filter:blur(4px);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  z-index:2;
}
.imgv-prev{ left:max(8px, calc(var(--imgv-gutter) - 8px)); }
.imgv-next{ right:max(8px, calc(var(--imgv-gutter) - 8px)); }
.imgv-nav:hover{ background:rgba(17,24,39,.75); }


/* ===== Fixed Bottom Action Bar ===== */

.equip-actionbar__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center; /* 오른쪽 정렬, 필요 시 space-between 등으로 변경 */
  flex-wrap: wrap;
}

/* 작은 화면일 때 버튼 터치 영역 여유 */
@media (max-width: 640px){
  .equip-actionbar__inner{
    padding: 12px 14px;
    gap: 8px;
  }
  .equip{
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }
}

/* 인쇄 시 숨김 */
@media print{
  .equip-actionbar{ display: none !important; }
}

/* 고정바 스페이서: 푸터가 바에 가려지지 않도록 하단 여유 확보 */
.equip-actionbar-spacer{
  height: calc(var(--actionbar-h) + env(safe-area-inset-bottom));
}

.map-modal{ z-index: 2001; }    /* 액션바(1000)보다 위 */
.imgv-modal{ z-index: 2001; }   /* 이미지 뷰어는 더 위 */
.map-canvas{ min-height: 320px; height: 45vh; } /* 지도가 0px 되지 않게 */
/* 하단 고정바는 변수로 bottom 제어 (푸터 보일 때 자연스럽게 올라감) */
/* 하단 고정 액션바: 처음엔 화면 아래(숨김) → is-in 때 위로 슬라이드 인 */
.equip-actionbar{
  position: fixed;
  left: 0; right: 0;
  bottom: var(--bar-bottom, 0px);
  background: #111827;      /* 사이트 톤에 맞게 */
  color: #fff;
  transform: translateY(110%);
  opacity: 0;
  transition:
    transform .48s cubic-bezier(.22,1,.36,1),
    opacity   .40s ease;
  will-change: transform, opacity;
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 18px rgba(0,0,0,.18);
}
/* 초기 렌더 시 클래스 토글로 애니메이션 시작 */
.equip-actionbar.is-in {
  transform: translateY(0);
  opacity: 1;
}

/* 모션 최소화 환경 배려 */
@media (prefers-reduced-motion: reduce){
  .equip-actionbar{ transition: none; transform: translateY(0); opacity: 1; }
}
/* 비활성화 상태 시 시각적 처리 */
#btn-top[disabled],
#btn-top.is-disabled{
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none; /* 클릭/탭 방지 */
}
.equip-desc__empty {
  color: var(--muted);
  font-style: italic;
  padding: 8px 0;
}
/* =========================================
   Price Check — Absolute Global Popover (check mode)
   - 부모 overflow:hidden 영향 없이 항상 보이도록 전역 레이어로 동작
   - 버튼 위/아래 배치 지원: [data-placement="top"|"bottom"]
   - 다크모드/고대비/모바일 대응
   ========================================= */

/* 0) 기본 숨김 일관화 */
.pc-float[hidden] { display: none !important; }

/* 1) 팝오버 컨테이너 */
.pc-float {
  position: absolute;
  z-index: 10000;                  /* 헤더/모달보다 앞서도록 충분히 큼 */
  inset: auto auto auto auto;      /* JS에서 top/left를 지정 */
  display: flex;
  flex-direction: column;
  gap: 8px;

  /* 사이즈 */
  width: min(92vw, 360px);
  max-width: 92vw;

  /* 배경/테두리/그림자 */
  background: #ffffff;
  border: 1px solid #e5e7eb;       /* gray-200 */
  border-radius: 12px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, .12),
    0 2px 8px rgba(0, 0, 0, .06);

  /* 내부 여백 */
  padding: 10px 12px 12px;

  /* 애니메이션(선호도 반영) */
  transform-origin: bottom left;
  animation: pc-float-in .14s ease-out both;
}

@keyframes pc-float-in {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* 2) 화살표(말풍선 꼬리) — 선택사항: HTML에 <span class="pc-float__arrow" aria-hidden="true"></span> 추가 시 */
.pc-float__arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  background: inherit;             /* 컨테이너 배경과 동일 */
  border: inherit;                 /* 컨테이너 테두리와 동일 */
  border-top: none;                /* 회전 후 이음새 최소화 */
  border-right: none;
  transform: rotate(45deg);
}

/* 위에 뜰 때: 버튼을 향하도록 아래쪽에 꼬리 */
.pc-float[data-placement="top"] .pc-float__arrow {
  bottom: -7px;                    /* 컨테이너 밖으로 살짝 */
  left: 16px;
}
/* 아래에 뜰 때: 위쪽에 꼬리 */
.pc-float[data-placement="bottom"] .pc-float__arrow {
  top: -7px;
  left: 16px;
}

/* 3) 입력 */
.pc-input {
  width: 100%;
  min-width: 220px;
  height: 38px;                    /* 컴팩트 */
  padding: 0 12px;
  font-size: 14px;
  line-height: 38px;
  background: #ffffff;
  border: 1px solid #d1d5db;       /* gray-300 */
  border-radius: 8px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.pc-input:focus {
  border-color: #2563eb;           /* blue-600 */
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* 4) 전송 버튼 */
.pc-submit {
  align-self: flex-end;            /* 오른쪽 정렬 */
  height: 36px;
  line-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  white-space: nowrap;
}

/* 5) 안내문 */
.pc-hint {
  margin-top: 2px;
  font-size: 12px;
  color: #6b7280;                  /* gray-500 */
}

/* 6) 모바일 최적화 */
@media (max-width: 480px) {
  .pc-float {
    width: 94vw;                   /* 더 넓게 */
    padding: 10px 10px 12px;
    border-radius: 10px;
  }
  .pc-submit { width: 100%; }      /* 한 줄 버튼 */
}

/* 7) 다크모드 (선호도) */
@media (prefers-color-scheme: dark) {
  .pc-float {
    background: #0f172a;           /* slate-900 */
    border-color: #1f2937;         /* gray-800 */
    box-shadow:
      0 10px 30px rgba(0, 0, 0, .55),
      0 2px 8px rgba(0, 0, 0, .35);
    color: #e5e7eb;                /* gray-200 */
  }
  .pc-input {
    background: #0b1220;
    color: #e5e7eb;
    border-color: #334155;         /* slate-700 */
  }
  .pc-input:focus {
    border-color: #60a5fa;         /* blue-400 */
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .22);
  }
  .pc-hint { color: #9ca3af; }     /* gray-400 */
}

/* 8) 고대비/접근성 보정 */
@media (prefers-contrast: more) {
  .pc-float {
    border-width: 2px;
    box-shadow: none;
  }
  .pc-input:focus {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .35);
  }
}

/* 9) 모션 최소화 선호 */
@media (prefers-reduced-motion: reduce) {
  .pc-float { animation: none; }
}

/* 10) 안전한 스크롤 고정 UI와의 충돌 방지 (있다면) */
html.modal-open .pc-float,
html.no-scroll .pc-float {
  position: absolute; /* fixed 대신 absolute 유지: JS가 top/left 갱신 */
}
.price-button{display:block;width:100%;margin:10px 0;}
.srp{margin-top:30px;}
.brp__hero {
    width: 100%;
    height: 300px;
    background: url('/assets/img/equipment_list_main.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    border-radius: 0;
}

.brp__hero-inner {
    max-width: 900px;
    width: 100%;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.brp__hero-title {
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 10px;
}

.brp__hero-desc {
    font-size: 17px;
    font-weight: 300;
    margin: 0;
}

/* ===== 모바일 최적화 ===== */
@media (max-width: 768px) {
    .brp__hero {
        width: 100vw;
        margin-left: calc(-1 * (100vw - 100%)/2); /* 중앙 정렬 보정 */
        margin-right: calc(-1 * (100vw - 100%)/2);
        height: 120px;
        padding: 10px 15px;
    }

    .brp__hero-title {
        font-size: 15px;
        margin-bottom: 6px;
    }
    .brp__hero-desc {
        font-size: 11px;
    }
}
.main.is-sub{
	padding-top:0 !important;
	padding-bottom:50px !important;
}