/* ================= Buttons ================= */
/* 버튼,테이블,리스트,액션,라이트박스,모달,아이콘버튼*/
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:40px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  font-family: var(--font-body);
}

.btn:hover{ background:#f3f4f6; }

.btn.btn-primary{
  background:#111827;
  color:#fff;
  border-color:#111827;
}
.btn.btn-primary:hover{ filter:brightness(.95); }

.btn.btn-ghost{ background:transparent; }

/* ================= Tables ================= */
.table-wrap{
  overflow:auto;
  border-radius:14px;
  border:1px solid var(--line);
}

.table{
  width:100%;
  border-collapse:collapse;
  min-width:640px;
  background:#fff;
  font-family: var(--font-body);
}

.table th,
.table td{
  padding:12px;
  border-bottom:1px solid var(--line);
  font-size:14px;
  text-align:left;
  vertical-align:top;
}

.table th{
  background:#f8fafc;
  font-size:13px;
  color:#334155;
}

/* ================= Lists ================= */
.list{
  list-style:none;
  padding:0;
  margin:12px 0 0;
}

.list li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px dashed var(--line);
}

.list .date{
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}

/* ================= Actions ================= */
.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* ================= Lightbox ================= */
.lightbox{
  position:fixed;
  inset:0;
  z-index:10000;
}

.lightbox[hidden]{ display:none; }

.lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

.lightbox-content{
  position:relative;
  max-width:min(980px, 92vw);
  max-height:86vh;
  margin:8vh auto 0;
  background:#111;
  border-radius:18px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.12);
  -webkit-overflow-scrolling: touch;
}

.lightbox-content img{
  width:100%;
  height:auto;
  display:block;
}

.lightbox-close{
  position:absolute;
  top:10px;
  right:12px;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:22px;
  cursor:pointer;
}

.lightbox-close:hover{
  background:rgba(0,0,0,.55);
}

/* ================= Header Modal Buttons (예약/후기) ================= */
/* 기존 .nav a 스타일과 비슷하게 보이게 "버튼만" 리셋 + 맞춤 */
.nav-modal-btn{
  -webkit-appearance:none;
  appearance:none;
  border:0;
  background:transparent;
  padding:10px 10px;
  border-radius:12px;
  font: inherit;
  color:#111827;
  cursor:pointer;
  line-height:1;
  font-weight:700;
  letter-spacing:-.01em;
  position:relative;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

/* hover 배경 */
.nav-modal-btn:hover{
  background:#f3f4f6;
}

/* 기존 밑줄 인디케이터 느낌 */
.nav-modal-btn::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:6px;
  height:2px;
  border-radius:999px;
  background:transparent;
  transform:scaleX(.35);
  transform-origin:center;
  transition: transform .18s ease, background .18s ease;
}
.nav-modal-btn:hover::after{
  background:rgba(17,24,39,.22);
  transform:scaleX(1);
}

/* 포커스(키보드) */
.nav-modal-btn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(17,24,39,.18);
}

/* 모바일 nav(open)에서 넓게 */
@media (max-width: 760px){
  .nav-modal-btn{
    width:100%;
    text-align:left;
    padding:12px;
  }
  .nav-modal-btn::after{ display:none; }
}

/* ================= Modal (공통) ================= */
.gmodal{
  position:fixed;
  inset:0;
  z-index:1000;
}
.gmodal[hidden]{ display:none; }

.gmodal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.45);
}

.gmodal-card{
  position:relative;
  width:min(520px, calc(100vw - 40px));
  margin:0 auto;
  top:14vh;
  background:#fff;
  border-radius:22px;
  box-shadow: 0 20px 60px rgba(2,6,23,.22);
  padding:38px 28px 30px;
  text-align:center;
}

.gmodal-x{
  position:absolute;
  right:14px;
  top:12px;
  width:38px;
  height:38px;
  border-radius:12px;
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:26px;
  line-height:38px;
  color:#111827;
}
.gmodal-x:hover{ background:#f3f4f6; }

.gmodal-icon{
  width:78px;
  height:52px;
  margin:0 auto 14px;
  background:#111827;
  border-radius:999px;
  transform: rotate(-8deg);
  clip-path: polygon(0% 45%, 8% 25%, 22% 15%, 40% 10%, 60% 14%, 76% 26%, 92% 44%, 100% 62%, 92% 78%, 74% 88%, 54% 92%, 36% 90%, 20% 82%, 8% 70%);
  opacity:.92;
}

.gmodal-title{
  font-size:22px;
  font-weight:900;
  letter-spacing:-.02em;
  color:#111827;
}

.gmodal-desc{
  margin-top:10px;
  font-size:14px;
  color:#6b7280;
  line-height:1.7;
}

@media (max-width: 420px){
  .gmodal-card{ padding:34px 20px 26px; top:12vh; }
  .gmodal-title{ font-size:20px; }
}

/* ✅ 모바일 메뉴 열리면(바디 클래스 기준) 슬라이더 UI 숨김 */
body.nav-open .hero-btn,
body.nav-open .hero-dots{
  display:none !important;
}

/* ✅ 모바일 메뉴가 슬라이더보다 위로 오게 */
@media (max-width: 760px){
  .nav{
    z-index:1000;
  }
}

/* ===== 아이콘 버튼 스타일(첫번째 스샷 느낌) ===== */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  height:38px;
  min-width:38px;
  padding:0 10px;

  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background:#2b3441;            /* 스샷 느낌의 다크 톤 */
  color:#e5e7eb;

  cursor:pointer;
  text-decoration:none;
  font-weight:800;
  line-height:1;
}

.icon-btn:hover{
  filter:brightness(1.07);
}

.icon-btn .icon{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* 로그아웃(위험 버튼 느낌) */
.icon-btn.danger{
  background:#111827;
  border-color:rgba(255,255,255,.08);
}

/* ===== 모바일: 텍스트 숨기고 아이콘만(완전 깔끔) ===== */
@media (max-width:760px){
  .icon-text{ display:none; }
  .icon-btn{ padding:0; width:40px; }
}


/* 공지사항 팝업 css*/
/* ===== Overlay ===== */
.popup-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.58);
  z-index: 9999;
  display:flex; align-items:center; justify-content:center;
  padding: 16px;
}

/* ===== Card ===== */
.poster-card{
  width: min(350px, 100%);
  max-height: calc(100vh - 48px);
  background:#fff;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.30);
  position: relative;
  display:flex;
  flex-direction: column;
 transform: translate(-400px,-120px); /* 위로 40px */
}

/* X button */
.poster-x{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px;
  border:0; border-radius:12px;
  background: rgba(255,255,255,.88);
  cursor:pointer;
  font-size:16px;
  display:flex; align-items:center; justify-content:center;
}

/* ===== Poster area ===== */
.poster-area{
  overflow: auto;                 /* 포스터가 길면 여기만 스크롤 */
  -webkit-overflow-scrolling: touch;
}

.poster-link{
  display:block;
  cursor:pointer;
}
.poster-img{
  width: 100%;
  height: auto;
  display:block;
}

/* ===== Fallback(text) ===== */
.fallback{
  padding: 18px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.fallback-title{
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
}
.fallback-content{
  font-size: 14px;
  color:#334155;
  line-height:1.6;
  max-height: 320px;
  overflow:auto;
}
.fallback-link-btn{
  align-self: flex-start;
  font-size: 13px;
  font-weight: 800;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.poster-actions{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-top:1px solid rgba(0,0,0,.08);
  background:#fff;
  border-bottom-left-radius:14px;
  border-bottom-right-radius:14px;
}

.poster-linkbtn,
.poster-closebtn{
  border:0;
  background:transparent;
  padding:6px 4px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  color:#111;
}

.poster-linkbtn{ opacity:.9; }
.poster-closebtn{
  padding:6px 10px;
  border:1px solid rgba(0,0,0,.25);
  border-radius:6px;
}


@media (max-width: 420px){
  .poster-card{ width: min(560px, 100%); }
}
/* 모바일 팝업창*/
@media (max-width: 768px){
  .poster-card{
    left: 50% !important;
    transform: translate(-60%, -40px) !important;
    width: 76vw !important;
  }
}


/* ================= .qbtn Quickbar ================= */
.quickbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:14px 0 14px;
}

.qbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:800;
  font-size:14px;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
  font-family: var(--font-body);
}

.qbtn:hover{ background:#f3f4f6; }

.qbtn-primary{
  background:#111827;
  color:#fff;
  border-color:#111827;
}
.qbtn-primary:hover{ filter:brightness(.95); }

.qbtn-tel{
  border-style:dashed;
}
/* =========================
   Mobile Sticky Reserve CTA (Premium - Slim)
   ========================= */
.sticky-reserve{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 10px; /* ✅ 푸터와 살짝 띄우기 */
  z-index: 9998;

  padding: 0 14px; /* ✅ 바 자체 패딩 최소화 */
  background: transparent; /* ✅ 바 배경 없애서 떠있는 느낌 */
  border: 0;
  backdrop-filter: none;

  transform: translateY(120%);
  transition: transform .35s ease;
  display: none;
}

/* 버튼 자체를 'floating pill'로 */
.sticky-reserve__btn{
  display: block;
  text-align: center;

  padding: 13px 16px;
  border-radius: 16px;

  font-weight: 900;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-decoration: none;

  background: #1f7a4f;   /* 딥 그린 */
  color: #ffffff;

    border: 1px solid rgba(255,255,255,.35); /* 분리감 */
 box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

/* 눌림 피드백 */
.sticky-reserve__btn:active{
  transform: translateY(1px);
}

/* ✅ 모바일에서만 표시 */
@media (max-width: 768px){
  .sticky-reserve{ display: block; }

  /* ✅ 본문 가림 방지: 버튼 높이만큼만 */
  body{
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }
}

/* ✅ iOS 안전영역 */
@supports (padding: max(0px)){
  .sticky-reserve{
    bottom: max(10px, env(safe-area-inset-bottom));
  }
}

/* ✅ 관리자 숨김 */
body.admin .sticky-reserve{ display:none !important; }
body.admin{ padding-bottom:0 !important; }