@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

#tab4{
  --black:#141414;
  --ink:#141414;
  --ink-soft:#4B4B4B;
  --ink-faint:#9A9A9A;
  --line:#E7E7E7;
  --line-strong:#D9D9D9;
  --panel:#FAFAFA;
  --accent:#1D54A5;
  --accent-dark:#173F7C;
  --accent-soft:#EDF2FA;
  --accent-line:#C9D8EF;
}
/* 사이트 공통 reset.css가 div/p/li/h1~h6 등에 line-height:1을 직접 걸어놔서,
   #tab4 하나에만 line-height를 줘봐야 상속이 안 먹힘(직접 지정이 상속보다 항상 우선).
   그래서 #tab4 하위 전체에 명시적으로 다시 걸어준다. */
#tab4, #tab4 *{box-sizing:border-box; line-height:1.4;}
#tab4{
  color:var(--ink);
  font-family:'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'tnum' 1;
  position:relative;
}
#tab4 a{color:inherit; text-decoration:none;}

/* ---------- page shell ---------- */
/* 다른 예약 탭들과 동일하게 .reservation 가장자리까지 꽉 채운다(양사이드 여백 0).
   대신 긴 문단(art-body)만 따로 읽기 폭을 제한해서 글줄이 너무 안 늘어지게 한다. */
#tab4 .guide-wrap{padding:0;}
#tab4 .art-body > ol, #tab4 .art-body > p, #tab4 .art-body > ul.circ{max-width:720px;}
#tab4 .page-title{font-size:32px; font-weight:800; margin:0 0 8px; letter-spacing:-0.01em;}
#tab4 .page-lead{color:var(--ink-soft); font-size:15px; max-width:640px; margin:0 0 32px;}

#tab4 .reveal{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease;}
#tab4 .reveal.in{opacity:1; transform:translateY(0);}

/* ---------- 이용 정보 요약 (체크인/체크아웃 · 추가인원 · 편의시설 · 주차, 문의 최다 -> 상단 노출) ---------- */
#tab4 .section-label{font-size:14px; font-weight:700; color:var(--ink-soft); margin:0 0 12px;}
#tab4 .info-summary{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin:0 0 12px;}
#tab4 .info-block{background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 22px 22px; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;}
#tab4 .info-block:hover{transform:translateY(-4px); box-shadow:0 18px 34px -20px rgba(29,84,165,0.35); border-color:var(--accent);}
#tab4 .info-block.info-block--wide{grid-column:1 / -1;}
#tab4 .info-note{font-size:14px; color:var(--ink-faint); margin:8px 0 0;}
#tab4 .info-note--emphasis{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; color:var(--accent-dark); text-align:center;
  background:var(--accent-soft); border:1px solid var(--accent-line);
  border-radius:8px; padding:10px 12px; margin-top:12px;
}
#tab4 .info-note-icon{width:16px; height:16px; flex-shrink:0;}

/* ---------- amenities ---------- */
#tab4 .amenity-list{display:flex; flex-wrap:wrap; justify-content:space-around; gap:13px; list-style:none; margin:0; padding:0;}
#tab4 .amenity-list li{display:flex; flex-direction:column; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft);}
#tab4 .amenity-icon{width:40px; height:40px; color:var(--ink-faint);}

/* ---------- bento guide cards ---------- */
#tab4 .bento-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-bottom:22px;}
#tab4 .bento-card{
  position:relative; overflow:hidden; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:26px 22px 22px; display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  scroll-margin-top:96px;
}
#tab4 .bento-card:hover, #tab4 .bento-card.jump-highlight{transform:translateY(-4px); box-shadow:0 18px 34px -20px rgba(29,84,165,0.35); border-color:var(--accent);}
#tab4 .bento-card .ghost{
  position:absolute; top:-14px; right:-2px; font-size:83px; font-weight:800;
  color:var(--ink); opacity:0.045; line-height:1; user-select:none;
}
#tab4 .bento-card h3{position:relative; z-index:1; font-size:17px; margin:0 0 22px;}
#tab4 .bento-card ul{position:relative; z-index:1; margin:0 0 20px; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px;}
#tab4 .bento-card li{font-size:14px; color:var(--ink-soft); display:flex; align-items:flex-start; gap:8px;}
#tab4 .bento-card li .fee-label{flex:1 1 auto; font-size:14px; color:var(--ink-soft);}
#tab4 .bento-card li::before{content:'•'; color:var(--ink-faint); flex-shrink:0;}
#tab4 .pill-fee{font-weight:700; font-size:12px; background:var(--accent-soft); color:var(--accent-dark); border:1px solid var(--accent-line); padding:2px 9px; border-radius:999px; white-space:nowrap;}
#tab4 .jump-chip{
  position:relative; z-index:1; margin-top:auto; align-self:flex-start;
  font-size:13px; color:var(--ink); display:inline-flex; align-items:center; gap:4px;
  padding:7px 12px; border-radius:999px; background:var(--panel); border:1px solid var(--line);
  transition:background .2s ease, color .2s ease;
}
#tab4 .jump-chip:hover{background:var(--panel); color:var(--ink);}
@media (hover:hover) and (pointer:fine){
  #tab4 .jump-chip:hover{background:var(--ink); color:#fff;}
}

#tab4 .closing-note{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px 22px; font-size:14px; color:var(--ink-soft); margin-top:26px; line-height:1.6;}

/* ---------- terms divider ---------- */
#tab4 .terms-divider{position:relative; margin:80px 0 36px; padding-top:28px; border-top:1px solid var(--line); scroll-margin-top:96px;}
#tab4 .terms-divider .wm{
  position:absolute; top:-6px; right:0; font-size:72px; font-weight:800; color:var(--ink);
  opacity:0.035; line-height:1; letter-spacing:0.02em; user-select:none;
}
#tab4 .group-label{display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-dark); font-weight:700; margin-bottom:8px;}
#tab4 .group-title{font-size:22px; font-weight:800; margin:0; scroll-margin-top:96px;}

/* ---------- accordion articles ---------- */
#tab4 .articles{display:flex; flex-direction:column; gap:12px;}
#tab4 details.article{
  border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff;
  scroll-margin-top:96px; transition:border-color .2s ease, box-shadow .2s ease;
}
#tab4 details.article[open]{border-color:var(--accent); box-shadow:0 14px 30px -22px rgba(29,84,165,0.4);}
#tab4 details.article:not([open]):hover{border-color:var(--line-strong);}
#tab4 summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px; padding:18px 20px; background:var(--panel);}
#tab4 summary::-webkit-details-marker{display:none;}
#tab4 .art-num{
  width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:#fff; font-weight:700; font-size:14px; transition:background .2s ease;
}
#tab4 details.article[open] .art-num{background:var(--accent);}
#tab4 .art-titles{flex:1; min-width:0;}
#tab4 .art-titles .tag{font-size:12px; color:var(--ink-faint); letter-spacing:0.04em;}
#tab4 .art-titles h3{margin:0; font-size:16px; font-weight:700; color:#504f4f;}
#tab4 .chev{width:20px; height:20px; color:var(--ink-faint); transition:transform .25s; flex-shrink:0;}
#tab4 details[open] .chev{transform:rotate(180deg);}
#tab4 .art-body{padding:20px 22px 24px 74px; font-size:15px; color:var(--ink-soft);}
#tab4 .art-body ol{margin:0; padding:0; list-style:none; counter-reset:art;}
#tab4 .art-body ol > li{counter-increment:art; position:relative; padding-left:24px; margin-bottom:14px; font-size: 15px;   line-height: 1.8;}
#tab4 .art-body ol > li:last-child{margin-bottom:0;}
#tab4 .art-body ol > li::before{content:counter(art)'.'; position:absolute; left:0; top:2px; font-weight:700; color:var(--accent-dark); font-size:13px;}
#tab4 .circ{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px;}
#tab4 .circ li{padding-left:0; font-size:14px;    line-height: 1.6;}
#tab4 .circ li::before{content:none;}
#tab4 .group-title2{font-size:15px; font-weight:700; color:var(--ink); margin:22px 0 22px; padding-top:14px; border-top:1px dashed var(--line);}
#tab4 .group-title2:first-child{margin-top:0; padding-top:0; border-top:none;}

/* ---------- data table / kv list ---------- */
#tab4 .data-table{width:100%; border-collapse:collapse; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); margin:10px 0 14px; table-layout:fixed;}
#tab4 .data-table th{background:var(--panel); font-weight:600; font-size:14px; color:#333; padding:13px 10px; text-align:center; border-right:1px solid var(--line); border-bottom:1px solid var(--line-strong);}
#tab4 .data-table th:last-child{border-right:none;}
#tab4 .data-table td{padding:13px 10px; text-align:center; font-size:14px; font-weight:600; color:var(--ink); border-right:1px solid var(--line);}
#tab4 .data-table td:last-child{border-right:none;}
#tab4 .kv-list{border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); margin:10px 0 14px;}
#tab4 .kv-row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 4px; border-bottom:1px solid var(--line); font-size:14px;}
#tab4 .kv-row:last-child{border-bottom:none;}
#tab4 .kv-row .k{color:var(--ink-soft); flex:1 1 auto; min-width:0; word-break:keep-all; overflow-wrap:break-word;}
#tab4 .kv-row .k.k-strong{font-weight:700; color:var(--ink);}
#tab4 .kv-row .v{font-weight:700; color:var(--ink); text-align:right; flex:0 1 auto; min-width:0; word-break:keep-all; overflow-wrap:break-word;}
#tab4 .note-tag{font-style:normal; font-weight:700; font-size:12px; color:var(--accent-dark); background:var(--accent-soft); border:1px solid var(--accent-line); padding:2px 8px; border-radius:999px; margin-left:6px; white-space:nowrap; display:inline-block;}
/* 유아(추가 인원) 행: 라벨이 두 줄(<br>)로 꺾이는 만큼, 값 쪽도 안내 문구와 뱃지를
   줄바꿈 폭에 기대지 않고 항상 세로로 쌓아 뱃지 위 간격을 안정적으로 확보한다. */
#tab4 .kv-row--stack .v{display:flex; flex-direction:column; align-items:flex-end; gap:4px;}
#tab4 .kv-row--stack .note-tag{margin-left:0;}
#tab4 .badge-warn{
  display:inline-block; background:#B4342A; color:#fff;
  padding:4px 11px; border-radius:999px; font-weight:700; font-size:14px;
  letter-spacing:-0.01em; box-shadow:0 2px 8px -3px rgba(180,52,42,0.6);
}
#tab4 .badge-ok{
  display:inline-block; background:var(--accent-soft); color:var(--accent-dark);
  border:1px solid var(--accent-line);
  padding:3px 11px; border-radius:999px; font-weight:700; font-size:14px;
}

#tab4 .final-note{background:var(--panel); border:1px solid var(--line); color:var(--ink-soft); border-radius:12px; padding:22px 24px; font-size:14px; margin:44px 0 40px;}

/* ---------- floating dock ---------- */
#tab4 .dock{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%, 26px);
  display:flex; gap:4px; padding:7px; border-radius:999px;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(12px) saturate(180%);
  /* dock이 스크롤 중 카드 위에 뜨면, 카드의 파란 테두리(hover/open 상태, var(--accent))
     곡선이 dock의 둥근 모서리와 정확히 겹치지 않아 일부만 가려지고 나머지는 흰 여백에서
     갑자기 뚝 끊긴 것처럼 보였다(실측 확인됨). 거의 흰색인 hairline border만으로는
     해결이 안 되고, dock 바깥으로 번지는 넓고 부드러운 흰색 halo로 그 절단면 자체를
     흐리게 페이드시켜야 자연스럽게 사라져 보인다. */
  box-shadow:0 16px 34px -12px rgba(20,20,20,0.22), 0 0 0 1px rgba(20,20,20,0.06), 0 0 22px 14px rgba(255,255,255,0.9);
  z-index:90; opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease;
  /* 모바일에서 가로로 스와이프해서 넘겨보는 바라, 세로 스크롤 제스처와 헷갈려
     탭이 씹히지 않도록 가로 스크롤만 이 요소가 직접 처리하게 한다 */
  touch-action:pan-x;
}
#tab4 .dock.show{opacity:1; transform:translate(-50%, 0); pointer-events:auto;}
#tab4 .dock a{font-size:13px; color:var(--ink-soft); padding:9px 14px; border-radius:999px; white-space:nowrap; transition:background .2s ease, color .2s ease; -webkit-tap-highlight-color:transparent; touch-action:manipulation;}
#tab4 .dock a.active{background:var(--accent); color:#fff; font-weight:700;}
@media (hover:hover) and (pointer:fine){
  #tab4 .dock a:hover{background:var(--accent-soft); color:var(--accent-dark); font-weight:700;}
  #tab4 .dock a.active:hover{background:var(--accent); color:#fff;}
}

/* ---------- decorative corner ---------- */

/* 태블릿 폭(아이패드 등, ~761~1024px): 3열 그리드가 너무 좁아져서
   카드 안 배경 숫자(ghost)와 TERMS 워터마크가 카드 폭에 비해 과하게 커 보이고
   일부는 잘려 보이기까지 함 -> 2열로 줄이고 장식용 글자 크기도 같이 줄인다. */
@media (max-width:1024px) and (min-width:761px){
  /* info-block은 라벨+값 형태라 2열로는 값이 넘치므로 태블릿 폭에서는 1열로 */
  #tab4 .info-summary{grid-template-columns:1fr;}
  #tab4 .bento-grid{grid-template-columns:repeat(2, 1fr);}
  #tab4 .bento-card .ghost{font-size:56px;}
  #tab4 .terms-divider .wm{font-size:48px;}
}

@media (max-width:760px){
  #tab4 .guide-wrap{padding:0;}
  #tab4 .info-summary{grid-template-columns:1fr;}
  #tab4 .amenity-icon{width:26px; height:26px;}
  /* 예약안내(tab3) 모바일 실측값에 맞춤: 제목 h3 16.64px, 본문 li 15.6px */
  #tab4 .page-title{font-size:17px; margin-bottom:18px;}
  #tab4 .page-lead{font-size:14px;}
  #tab4 .bento-grid{grid-template-columns:1fr;}
  #tab4 .bento-card h3{font-size:16px;}
  #tab4 .bento-card li{font-size:14px;}
  /* 비용 청구 요인 카드: 항목명 폭 고정 대신, 금액 뱃지를 항목 우측 끝으로 붙여서 줄맞춤 */
  #tab4 .bento-card li .pill-fee{margin-left:auto;}
  #tab4 .jump-chip{font-size:12px;}
  #tab4 .closing-note{font-size:14px;}
  #tab4 .group-title{font-size:17px;}
  #tab4 .art-titles h3{font-size:14px;}
  #tab4 *{line-height:1.4;}
  #tab4 .art-body{padding:16px 16px 20px 20px; font-size:15px;}
  #tab4 .group-title2{font-size:14px;}
  #tab4 .circ li{font-size:14px;}
  #tab4 .kv-row{font-size:14px;}
  #tab4 .badge-warn, #tab4 .badge-ok{font-size:13px;}
  #tab4 .data-table{table-layout:auto;}
  #tab4 .data-table th, #tab4 .data-table td{padding:11px 6px; font-size:13px;}
  #tab4 .final-note{font-size:14px;}
  /* 항목이 5개(이용 정보 추가)로 늘어나면서 좁은 화면에서 dock 폭을 넘어가
     마지막 항목이 가로 스크롤 없인 안 보이고, 스크롤 후 탭도 잘 안 먹는 문제가 있었다.
     패딩/글자를 줄여서 스크롤 없이 5개가 다 들어오게 한다. */
  #tab4 .dock{max-width:92vw; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:2px;}
  #tab4 .dock a{padding:9px 10px; font-size:12px;}
}