/* ===================================================================
   노원 JUMP — 이용 안내 페이지 전용 (1안 Wide 위에 추가)
   group.css 뒤에 로드. .ug-* 컴포넌트.
   =================================================================== */

/* 섹션 뱃지 바 앵커 이동 시 헤더+고정 바에 가리지 않도록 여백 보정 */
#price, #rules, #hours, #access{ scroll-margin-top:180px; }
@media (max-width:900px){ #price, #rules, #hours, #access{ scroll-margin-top:50px; } }  /* 모바일 네비 보정 — 액티비티 기준 통일 */

/* 요금: 체험권 소개 + 3블록 요금표 */
.ug-tkintro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 28px}
.ug-tkcard{padding:20px 22px;border-radius:14px;background:color-mix(in srgb,var(--zc) 6%,var(--bg));border:1px solid color-mix(in srgb,var(--zc) 26%,transparent)}
.ug-tkcard .lab{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:2px;color:var(--zc)}
.ug-tkcard h4{margin:6px 0 8px;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.ug-tkcard h4 em{display:inline-block;margin-left:6px;padding:3px 8px;border-radius:7px;background:color-mix(in srgb,var(--zc) 14%,transparent);font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:-.01em;color:var(--zc);vertical-align:middle}
.ug-tkcard .lead{margin:0 0 6px;font-size:14.5px;font-weight:700;color:var(--zc);letter-spacing:-.02em}
.ug-tkcard p{margin:0;font-size:14px;line-height:1.75;color:var(--ink-2,#3a3a40);word-break:keep-all;text-wrap:pretty}
.ug-tkcard__use{margin:12px 0 0;padding:12px 0 0;list-style:none;border-top:1px dashed color-mix(in srgb,var(--zc) 30%,transparent)}
.ug-tkcard__use li{position:relative;padding-left:14px;font-size:13.5px;line-height:1.7;color:var(--ink-2,#3a3a40);word-break:keep-all;text-wrap:pretty}
.ug-tkcard__use li+li{margin-top:3px}
.ug-tkcard__use li::before{content:'';position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--zc)}
#price .ug-price-grid{grid-template-columns:minmax(0,1fr);gap:32px}
.ug-zprice{display:flex;flex-direction:column;gap:20px}
.ug-ztable{border:1px solid color-mix(in srgb,var(--zc) 30%,transparent);border-radius:16px;overflow:hidden;background:#fff}
.ug-ztable header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:18px 24px;background:color-mix(in srgb,var(--zc) 9%,transparent);border-bottom:1px solid color-mix(in srgb,var(--zc) 24%,transparent)}
.ug-ztable .gp-table{margin:0}
.ug-ztable .gp-table thead th{padding-top:18px;padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--ink-2,#333) 12%,transparent)}
.ug-ztable .gp-table th:first-child,.ug-ztable .gp-table td:first-child{padding-left:24px}
.ug-ztable .gp-table th:last-child,.ug-ztable .gp-table td:last-child{padding-right:24px}
.ug-ztable .gp-table tr:last-child td{border-bottom:0}
.ug-ztable header h3{margin:0;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--zct,var(--zc))}
.ug-ztable header p{margin:0;font-size:12.5px;color:var(--mute);flex:1 1 100%}
.ug-ztable .gp-table td.o{color:var(--mute);text-decoration:line-through;font-size:13.5px}
.ug-ztable .gp-table td.s{color:var(--zct,var(--zc));font-weight:800;font-size:17px;letter-spacing:-.02em}
.ug-ztable .ug-price-note{margin:0;padding:12px 24px 16px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.ug-onsite{color:var(--pink);font-weight:800}
.ug-obadge{margin-left:auto;flex:none;padding:6px 12px;border-radius:999px;background:var(--pink);color:#fff;font-size:12px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.ug-kidsblock{margin-top:20px;padding:22px;border-radius:18px;background:color-mix(in srgb,var(--z-kids,#f7b924) 10%,var(--bg,#f6f7f9));border:1px dashed color-mix(in srgb,var(--z-kids,#f7b924) 55%,transparent)}
.ug-kidsblock__hd{margin-bottom:16px}
.ug-kidsblock__hd .lab{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:2px;color:#a06f08}
.ug-kidsblock__hd h4{margin:6px 0 6px;font-size:19px;font-weight:800;letter-spacing:-.02em}
.ug-kidsblock__hd p{margin:0;font-size:14px;color:#3a3a40}
.ug-kidsblock .ug-ztable{background:#fff}
.ug-kidsnote{margin-top:14px;font-size:13.5px;line-height:1.85;color:#3a3a40;word-break:keep-all;text-wrap:pretty}

/* 요금: 메인 테이블 + 사이드 서브테이블 */
.ug-price-grid{ display:grid; grid-template-columns:1.55fr 1fr; gap:40px; align-items:start; }
.ug-subtables{ display:flex; flex-direction:column; gap:22px; }
.ug-subcard[hidden]{ display:none; }
.ug-subcard{ border:1px solid var(--line-2); border-radius:18px; padding:24px 26px; background:#fff; }
.ug-subcard h4{ font-size:15px; font-weight:800; letter-spacing:-.02em; margin-bottom:14px; display:flex; align-items:center; gap:9px; }
.ug-subcard h4 .dot{ width:10px; height:10px; border-radius:3px; background:var(--pink); flex-shrink:0; }
.ug-subcard.bl h4 .dot{ background:var(--blue); }
.ug-minitable{ width:100%; border-collapse:collapse; font-size:14.5px; font-variant-numeric:tabular-nums; }
.ug-minitable td{ padding:9px 0; border-top:1px solid var(--line); }
.ug-minitable tr:first-child td{ border-top:0; }
.ug-minitable td.lbl{ color:#3a3a40; }
.ug-minitable td.lbl small{ display:block; color:var(--mute); font-size:12px; margin-top:2px; }
.ug-minitable td.num{ text-align:right; font-weight:700; white-space:nowrap; padding-left:14px; }

/* 반환 기준 */
.ug-refund{ margin-top:26px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ug-refund .item{ border:1px solid var(--line); border-radius:14px; padding:20px 22px; background:var(--bg-soft); }
.ug-refund .item b{ font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--pink); display:block; }
.ug-refund .item span{ font-size:13.5px; color:var(--mute); display:block; margin-top:4px; }

/* 감면·할인 카드 그리드 */
.ug-discount{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ug-dcard{ border-radius:22px; padding:34px 32px; color:#fff; position:relative; overflow:hidden; }
.ug-dcard.r50{ background:var(--pink); }
.ug-dcard.r30{ background:var(--blue); }
.ug-dcard.r10{ background:var(--yellow); color:#3a2a00; }
.ug-dcard .pct{ font-size:62px; font-weight:800; line-height:1; letter-spacing:-.03em; }
.ug-dcard h4{ margin-top:14px; font-size:17px; font-weight:800; letter-spacing:-.02em; }
.ug-dcard p{ margin-top:8px; font-size:14px; line-height:1.6; opacity:.92; }

/* 이용 규칙 하이라이트 (운동화·긴바지) */
.ug-rule-highlights{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:0 0 22px; }
.ug-rule-hl{ display:flex; align-items:center; gap:16px; padding:18px 22px; border-radius:16px; border:1px solid var(--line); background:#fff; }
.ug-rule-hl .ic{ flex:none; width:48px; height:48px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; }
.ug-rule-hl .ic svg{ width:24px; height:24px; }
.ug-rule-hl b{ display:block; font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.ug-rule-hl span{ display:block; margin-top:4px; font-size:14px; line-height:1.5; color:var(--mute); word-break:keep-all; }
.ug-rule-hl--pink{ background:color-mix(in srgb, var(--pink) 8%, #fff); border-color:color-mix(in srgb, var(--pink) 28%, transparent); }
.ug-rule-hl--pink .ic{ background:color-mix(in srgb, var(--pink) 14%, transparent); color:var(--pink); }
.ug-rule-hl--blue .ic{ background:color-mix(in srgb, var(--blue) 12%, transparent); color:var(--blue); }

/* 이용 규칙 / 안전 규정 */
.ug-rules{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ug-rule{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:32px 30px; }
.ug-rule .ic{ width:52px; height:52px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; background:rgba(233,34,133,.1); color:var(--pink); margin-bottom:20px; }
.ug-rule:nth-child(2) .ic{ background:rgba(3,122,184,.1); color:var(--blue); }
.ug-rule:nth-child(3) .ic{ background:rgba(247,185,36,.16); color:#b07d00; }
.ug-rule .ic svg{ width:26px; height:26px; }
.ug-rule h4{ font-size:19px; font-weight:800; letter-spacing:-.02em; }
.ug-rule ul{ list-style:none; margin-top:16px; display:flex; flex-direction:column; gap:11px; }
.ug-rule li{ display:flex; gap:10px; font-size:14.5px; line-height:1.55; color:#3a3a40; }
.ug-rule li::before{ content:"✓"; color:var(--pink); font-weight:800; flex-shrink:0; }

/* 센터 전경도 — 층별 가로 스트립 */
.ug-floors{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.ug-floor .slot{ height:210px; border-radius:16px; }
.ug-floor .cap{ margin-top:12px; }
.ug-floor .cap b{ font-size:16px; font-weight:800; letter-spacing:-.02em; }
.ug-floor .cap small{ display:block; margin-top:3px; font-size:13px; color:var(--mute); }

/* 주차 및 대중교통 */
.ug-access{ display:grid; grid-template-columns:1.4fr 1fr; gap:32px; align-items:stretch; }
.ug-map{ min-height:380px; height:100%; border-radius:20px; }
.ug-transit{ display:flex; flex-direction:column; gap:14px; }
.ug-trow{ display:flex; gap:16px; align-items:flex-start; border:1px solid var(--line); border-radius:14px; padding:20px 22px; background:#fff; }
.ug-trow .ic{ width:44px; height:44px; border-radius:12px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; background:rgba(3,122,184,.1); color:var(--blue); }
.ug-trow .ic svg{ width:22px; height:22px; }
.ug-trow b{ font-size:16px; font-weight:800; letter-spacing:-.02em; display:block; }
.ug-trow p{ margin-top:5px; font-size:14px; color:var(--mute); line-height:1.6; }
.ug-trow--pink{ background:#fff5f7; border-color:#fecdd3; }
.ug-trow-head{ display:flex; align-items:center; gap:8px; }
.ug-trow-head b{ display:inline-block; }
.ug-trow-badge{ display:inline-flex; align-items:center; justify-content:center; height:20px; padding:0 8px 1.5px; background:var(--pink); color:#fff; font-size:11px; font-weight:800; border-radius:999px; letter-spacing:-.02em; line-height:1; box-sizing:border-box; }

/* 운영 시간 */
.ug-hours{ display:grid; grid-template-columns:1.3fr 1fr; gap:28px; align-items:start; }
.ug-htable{ width:100%; border-collapse:collapse; }
.ug-htable th{ text-align:left; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); font-weight:500; padding:0 18px 14px; border-bottom:2px solid var(--ink); }
.ug-htable th.num{ text-align:right; }
.ug-htable td{ padding:18px; border-bottom:1px solid var(--line); font-size:16px; }
.ug-htable td.num{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.ug-htable td.plan{ font-weight:700; }
.ug-hside{ display:flex; flex-direction:column; gap:14px; }
.ug-hbox{ border:1px solid var(--line); border-radius:16px; padding:24px 26px; background:var(--bg-soft); }
.ug-hbox h4{ font-size:14px; font-weight:800; letter-spacing:-.01em; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.ug-hbox h4 .dot{ width:9px; height:9px; border-radius:50%; background:var(--pink); }
.ug-hbox p{ font-size:14.5px; color:#3a3a40; line-height:1.6; }
.ug-hbox p b{ font-weight:700; }

/* 카카오 플러스친구 플로팅 */
.ug-kakao{
  position:fixed; right:24px; bottom:24px; z-index:300;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:999px;
  background:#FEE500; color:#3c1e1e; font-weight:800; font-size:15px;
  box-shadow:0 14px 34px rgba(0,0,0,.2); transition:transform .15s;
}
.ug-kakao:hover{ transform:translateY(-2px); }
.ug-kakao svg{ width:20px; height:20px; }

@media (max-width:900px){
  .ug-price-grid,.ug-access,.ug-hours{ grid-template-columns:1fr; }
  .ug-discount,.ug-rules,.ug-rule-highlights{ grid-template-columns:1fr; }
  .ug-floors{ grid-template-columns:1fr 1fr; }
  .ug-refund{ grid-template-columns:1fr; }
  .ug-tkintro{ grid-template-columns:minmax(0,1fr); }
  .ug-obadge{ margin-left:0; }
}