/* ====== 공통 변수 (프로젝트 테마에 맞게 수정) ====== */
    :root {
      --notice-bg: #ffffff;
      --notice-border: #e5e7eb;
      --notice-radius: 14px;
      --notice-shadow: 0 6px 18px rgba(0,0,0,0.06);
      --notice-title: #111827;
      --notice-muted: #6b7280;
      --notice-accent: #2563eb; /* 브랜드 포인트 컬러 */
      --notice-badge-bg: #eff6ff;
      --notice-badge-text: #1d4ed8;
      --notice-hover: #f9fafb;
      --notice-new-dot: #ef4444;
      --notice-link: #111827;
      --notice-link-hover: #0f172a;
    }

    /* ====== 래퍼 카드 ====== */
    .notice {
      background: var(--notice-bg);      
      border-radius: var(--notice-radius);
      display: grid;
      gap: 14px;
    }

    .notice__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .notice__title {
      font-size: 18px;
      font-weight: 700;
      color: var(--notice-title);
      margin: 0;
      letter-spacing: -0.2px;
    }

    .notice__actions { display: flex; gap: 8px; align-items: center; }

   

    .notice__btn--primary {
      border-color: var(--notice-accent);
      color: #fff;
      background: var(--notice-accent);
    }

    /* ====== 리스트 ====== */
    .notice__list { list-style: none; margin: 0; padding: 0; display: grid; border-bottom: 1px solid var(--notice-border);  }

    .notice__item {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 10px;
      padding: 15px 10px;
      border-radius: 10px;
      transition: background 0.2s ease;
    }
    .notice__item + .notice__item { border-top: 1px solid var(--notice-border); }

    .notice__item:hover { background: var(--notice-hover); }

    .notice__meta { display: flex; align-items: center; gap: 8px; min-width: 168px; justify-content: flex-end; }
    .notice__date { color: var(--notice-muted); font-size: 12px; white-space: nowrap; }

    .notice__link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: var(--notice-link);
      font-size: 17px;
      line-height: 1.45;
    }

    .notice__link:hover { color: var(--notice-link-hover); }
    

    .notice__newdot {
      width: 8px; height: 8px; border-radius: 999px; background: var(--notice-new-dot);
      flex: 0 0 8px;
    }

    .notice__empty {
      text-align: center; color: var(--notice-muted); font-size: 14px; padding: 28px 8px;
    }

    /* 반응형 */
    @media (max-width: 520px) {
      .notice__item { grid-template-columns: 1fr; align-items: start; }
      .notice__meta { justify-content: flex-start; }
    }
 




/* 숙박요금 */


table.fare{
  width:100%;
  border-collapse:collapse;
  text-align:center;
  margin-bottom:20px;
}
thead th{
  background:#f2f6fa;
  border-bottom:1px solid #ccc;
  border-top:1px solid #ccc;
  padding:8px 0;
  font-weight:700;
}
tbody td{
  border-bottom:1px solid #ccc;
  border-top:1px solid #ccc;
  padding:6px 0;
}
tbody tr:nth-child(even){background:#fafafa;}
.room{
  text-align:left;
  font-weight:700;
  padding-left:10px;
}
.fri{color:#0056b3;font-weight:700;}
.sat{color:#c30000;font-weight:700;}
tfoot td{
  border:none;
  padding-top:10px;
  color:#666;
}
@media print{
  body{margin:0;width:auto;}
  h2,p.sub{margin:0;}
}




/* 렌탈가격 */ 


/* ====== 테이블 공통(그림자 없음, 미니멀) ====== */
:root{
  --tbl-bg:#fff;
  --tbl-text:#111827;           /* slate-900 */
  --tbl-muted:#6b7280;          /* gray-500 */
  --tbl-border:#111827;         /* gray-500 */
  --tbl-head:#f9fafb;           /* gray-50 */
  --tbl-head2:#f3f4f6;          /* gray-100 */
  --tbl-hover:#f6faff;          /* 살짝 파란 느낌 */
  --tbl-accent:#f23833;         /* 기존 강조색 유지 */
}

/* 스크롤 래퍼(반응형 가로 스크롤) */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-top:1px solid var(--tbl-border);
  background:var(--tbl-bg);
    margin-bottom: 50px;
}

/* 선택: 특정 테이블만 지정하고 싶으면 .price-table 로 교체 */
.table-wrap > table,
table.price-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  color:var(--tbl-text);
  background:var(--tbl-bg);
  line-height:1.5;
  table-layout:auto;
    text-align: center;
}

/* 헤더(다단 헤더 대응 + 스티키) */
table thead th{
  position:sticky;
  top:0;
  z-index:2; /* 다단 헤더 겹침 방지 */
  background:(--tbl-head);
  color:#111827;
  font-weight:700;
  white-space:nowrap;
  border-bottom:1px solid var(--tbl-border);
}

/* 셀 기본 패딩/보더 */
table th, table td{
  padding:12px 16px;
  border-bottom:1px solid var(--tbl-border);
  vertical-align:middle;
}

/* 좌측 첫 컬럼(행 헤더 느낌) 강조 */
table tbody th{
  background:#fcfcfd;
  font-weight:600;
  color:#1f2937;
}

/* 줄무늬 + 호버 */
table tbody tr:nth-child(even){
  background:#fafafa;
}
table tbody tr:hover{
  background:var(--tbl-hover);
}

/* 숫자 정렬 & 고정폭 숫자(세로 줄맞춤) */
table td{
  font-variant-numeric:tabular-nums;
}
table td.price,
table td[align="center"]{
  text-align:center !important; /* 기존 inline align 보정 */
}
table td.num{
  text-align:right;
}

/* 강조색 유지 */
table td,
table th{
  color:var(--tbl-text);
}
table td[style*="color:#f23833"],
table .accent{
  color:var(--tbl-accent) !important;
  font-weight:700;
}

@media (max-width: 599px) {

    div#packageTbl  > table {
        overflow: scroll;
        min-width: 800px;
    }
}
@media (min-width: 600px) and (max-width: 767px) {

    div#packageTbl  > table {
        overflow: scroll;
        min-width: 800px;
    }
}


/* 좁은 화면에서 가독성 강화 */
@media (max-width: 768px){
  table th, table td{ padding:10px 12px; }
  table{ font-size:14px; }
  table thead th{ white-space:initial; }
}



/* about */

.features{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px; margin-top:40px}
.card{background:var(--card); border:1px solid rgba(0,0,0,.05); border-radius:18px; padding:24px; box-shadow:var(--shadow); text-align:center; transition:.2s}
.card:hover{transform:translateY(-4px); box-shadow:0 8px 18px rgba(0,0,0,.08)}
.num{font-weight:800; font-size:22px; color:var(--brand-strong)}
.card h3{margin:10px 0 8px; font-size:1.1rem}
.card p{margin:0; color:var(--muted); font-size:.98rem}



/* SNS 버튼 */

      .talk_btn {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9999;
animation: fadeUp 0.8s ease-out forwards, bob 3s ease-in-out infinite;
transition: transform 0.3s ease;
}


@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}


@keyframes bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}


.talk_btn:hover {
transform: translateY(-4px) scale(1.08);
}


.talk_btn img {
width: 100px;
object-fit: contain;
display: block;
pointer-events: none;
}


@media (max-width: 480px) {
    .talk_btn img { width: 60px;}
}






/* 테이블을 감싸는 스크롤 전용 래퍼 - 기존 CSS와 절대 충돌 없음 */
.my-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
    margin-bottom: 50px;
}

/* 개별 테이블 네임스페이스: 기존 table 스타일과 분리 */
.my-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 900px; /* 모바일에서 깨짐 방지 */
  text-align: center;
}

/* 셀 스타일 - 완전 독립 */
.my-table th,
.my-table td {
  border-bottom: 1px solid #3e8bd4;
    border-top: 1px solid #3e8bd4;
  padding: 6px 10px;
  white-space: nowrap;
}

/* 헤더 전용 */
.my-table thead th {
  background: #3e8bd4;
  font-weight: bold;
    color:#fff;
    border: 1px solid #92c4f3;
    
}