/* 연대관 상세 /courts/yeondaegwan/<id> — 확정판(대표 11-13 안 1 · 요일 먼저 · 한 화면 한 결정)
   = 8 핵심 판 yd3.css(표 · 칩 줄은 뺌) + 9 시안 flow.css + 손질 2(글자 16 · 굵기 700 · 시작 시각 반경 16)
   + 상세 분리(대표 11-13 23시 「페이지별로의 목적이 2개가 되어서 헷갈림」 · 디자인 리드 '만든 값' 2판 4 · 5절): 머리 '← 연대관' · 사진 → 이름(할인 알약) → 주소 → 칸 · 보라 '상담원 연결' 하나.
   디자인 리드 확정판 tools/yd.css 값 그대로. 연대관 상세에만 붙는다(route.css3) — 아래 html · .ls-dock 규칙이 다른 쪽에 닿지 않게.
   스펙: docs/spec/BRAND_COURTS_YEONDAEGWAN.md */
html{scroll-behavior:auto!important}

/* 머리 '← 연대관' = 연대관 랜딩 머리 값 그대로(yeondaegwan-list.css · 폰 64 = 위 8 + 줄 56 · ← 44×44 · 내려도 안 숨음 · 내리면 1px 선) */
.hd.hd--back{top:0;transform:none!important}
.hd__top.hd__bk{position:relative;justify-content:center}
.hd__bk-a{position:absolute;left:calc(var(--g) - 18px);top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#111;-webkit-tap-highlight-color:transparent}
.hd__bk-a:active{background:#F2F2F2}
.hd__bk-a:focus-visible{outline:2px solid #111;outline-offset:2px}
.hd__bk-t{font-size:17px;line-height:24px;font-weight:700;letter-spacing:-.02em;color:#111}
.scrolled .hd.hd--back{box-shadow:0 1px 0 var(--line)}
@media (max-width:959px){.hd.hd--back{padding-top:calc(8px + env(safe-area-inset-top,0px))}}
/* 본문: 머리 → 사진 16 → 이름 줄 20 → 주소(15/22 #555) 4 → 고르기 칸 48 → 칸 제목(18 · 700) 아래 20 → 단계(만든 값 4절 '② 본문').
   본문이 짧아도 첫 화면에 바닥글(윗선 · 보라 로고)이 바 위로 비치지 않게 머리 아래 한 화면을 채우고, 끝에 바 77 + 32(만든 값 4절 '② 바닥' · 320에서 실제로 비쳤음) */
.ydd{box-sizing:border-box;min-height:calc(100vh - 64px);padding-bottom:calc(77px + 32px)}
.ydd .ls-gal-wrap{margin-top:16px}
/* 이름 줄(2판 · 만든 값 4절 '② 이름 줄'): 할인 코트만 이름 옆 '연대관 할인' 알약(운영 .yd-badge 그대로 · 바깥 여백만 gap으로) — 모자라면 다음 줄 왼끝(들여쓰기 0) */
.ydd-tt{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:4px;margin-top:20px}
.ydd-tt .ls-d__t{margin:0}
.ydd-tt .yd-badge{margin-left:0;top:0}
.ydd-addr{margin-top:4px;font-size:15px;line-height:22px;color:var(--sub);word-break:keep-all}
.ydd .yd{margin-top:48px}
/* 웹(960 이상 · 이번 판은 그림 없음): 일반 상세 왼쪽 칸 폭(1200 − 옆 칸 360 − 64)에 맞춰 글 칸만 좁힘 · 이름 위 32(일반 상세 웹과 같음) · 바 없음 */
@media (min-width:960px){.ydd{min-height:0;padding-bottom:88px}.ydd-body>*{max-width:776px}.ydd-tt{margin-top:32px}}
.yd-badge{display:inline-flex;align-items:center;vertical-align:middle;height:28px;padding:0 10px;margin-left:8px;border-radius:999px;background:#E6F6EE;color:#04603F;font-size:14px;line-height:20px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;position:relative;top:-2px}
.yd-badge:empty{display:none}
:where(.yd) button{font:inherit;border:0;cursor:pointer}
.yd button:focus-visible,.yd-sheet button:focus-visible,.dk button:focus-visible{outline:2px solid #111;outline-offset:2px}
.yd__t{margin-bottom:20px}
.yd__u{display:inline-block;white-space:nowrap}
.yd__s{white-space:pre}
.yd__u.is-brk .yd__s{display:none}
.nw{white-space:nowrap}
/* 고르기 전 보라 버튼(대표 11-13 「다른 것과 동일하게」 = 레슨 방식): aria-disabled 회색 #c9c9cc(lesson1/styles.css:40 같은 값 · 누름은 살림)
   → 누르면 빠진 단계로 올리고 그 칸 첫 버튼에 포커스 + 단계 위 안내 글 한 줄(lesson1 .field__hint 같은 값 14px #d92d20 · yeondaegwan.js ask). 깜빡임 · 흔들림 없음 */
.btn--join[aria-disabled="true"],.yd__web button[aria-disabled="true"],.ydd .yd__web button[aria-disabled="true"]{background:#c9c9cc!important;cursor:default;transform:none}
.yd .field__hint{margin:0 0 12px;font-size:14px;line-height:20px;color:#d92d20}

/* 고른 값 알약 줄(누르면 그 단계로 돌아감) */
.yf__sum{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.yf__pill{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 16px;border-radius:999px;border:1px solid #DDDDDD!important;background:#fff;color:#111;font-size:16px;line-height:1;font-weight:700;white-space:nowrap;letter-spacing:-.01em}
.yf__pill svg{color:#555;flex:none}
.yd .yf__pill:focus-visible,.yd button.yf__opt:focus-visible{outline:2px solid #111;outline-offset:2px}

/* 한 화면 한 결정: 요일 7 → 시간대 4 → (시작 시각) → 기간 2 */
.yf__opt{border:1px solid #DDDDDD!important;background:#fff;color:#111;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;white-space:nowrap}
.yf__opt b{font-size:16px;line-height:22px;font-weight:700;letter-spacing:-.01em}
.yf__opt i{font-style:normal;font-size:14px;line-height:18px;color:#555;letter-spacing:-.02em}
.yf__opt:disabled{background:#F7F7F7;color:#6E6E6E;border-color:#F7F7F7!important;cursor:not-allowed}
.yf__opt:disabled b{font-weight:500}
.yf__days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.yf__day{height:56px}
.yf__parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.yf__part{height:76px}
.yf__starts{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px}
.yf__start{height:48px;border-radius:16px;font-size:16px;line-height:1;font-weight:700;letter-spacing:-.01em}
.yf__gap{margin-bottom:24px}

/* 면(섞인 코트만) · 기간 */
.yd__kind{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.yd__kind button{height:48px;border-radius:16px;border:1px solid #DDDDDD!important;background:#fff;color:#111;font-size:16px;line-height:1;font-weight:700;letter-spacing:-.01em}
.yd__kind button:disabled{background:#F7F7F7;color:#6E6E6E;cursor:not-allowed;font-weight:500}
.yd__plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.yd__plan{height:60px;border-radius:16px;border:1px solid #DDDDDD!important;background:#fff;color:#111;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.yd__plan b{font-size:16px;line-height:22px;font-weight:700;letter-spacing:-.01em}
.yd__plan i{font-style:normal;font-size:14px;line-height:18px;color:#555}
.yd__kind button[aria-pressed="true"],.yd__plan[aria-pressed="true"]{background:#111;border-color:#111!important;color:#fff}
.yd__plan[aria-pressed="true"] i{color:#fff}
.yd__plan:disabled{background:#F7F7F7;color:#6E6E6E;cursor:not-allowed}
.yd__plan:disabled i{color:#6E6E6E}

/* 웹(하단 바 없음): 칸 안 금액 한 줄 + 상담원 연결
   보라는 한 화면에 하나 — 연대관 상세(.ydd)는 칸 안 '상담원 연결'이 보라(옆 칸 '앱에서 예약하기'는 이 페이지에 없음 · 만든 값 4절 '웹')
   고른 뒤 금액 줄 위 작은 줄 '전체 N원(정가)'(디자인 리드 판정 11-13) = 폰 바 작은 줄(#dk-s)과 같은 14px · 20 · 500 · #555 */
.yd__web{display:none}
@media (min-width:960px){
 .yd__web{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:32px}
 .yd__wp{display:flex;flex-direction:column;min-width:0;margin:0}
 .yd__ws{font-size:14px;line-height:20px;font-weight:500;color:#555;white-space:nowrap}
 .yd__web b{font-size:20px;line-height:28px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
 .yd__web button{height:52px;padding:0 28px;border-radius:999px;background:#111!important;color:#fff!important;font-size:16px;font-weight:700;white-space:nowrap;transition:background-color .15s}
 .ydd .yd__web button{background:var(--join,#600AFF)!important}
 .ydd .yd__web button[aria-disabled="true"]{background:#c9c9cc!important}
}
@media (min-width:960px) and (hover:hover){.ydd .yd__web button:not([aria-disabled="true"]):hover{background:var(--join-press,#4b00d4)!important}}

/* 하단 바(폰) = 연대관 얼굴 하나(상세 분리 뒤 두 얼굴 바꾸기 없음): 고르기 전 한 줄 · 고른 뒤 작은 줄 '전체 N원(정가)' 위 + 큰 줄(2시간 값) 아래 */
@media (max-width:959px){.ls-dock{display:grid!important;grid-template-columns:minmax(0,1fr)}}
.ls-dock .dk{grid-area:1/1;width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.ls-dock .dk .ls-dock__price{min-width:0}
.ls-dock .dk .ls-dock__price b{white-space:nowrap}
.dk--yd .ls-dock__price{display:flex;flex-direction:column;justify-content:center}
.dk--yd .ls-dock__price b{font-size:18px;line-height:26px;font-weight:700}
.dk--yd #dk-s{display:block;font-size:14px;line-height:20px;font-weight:500;color:#555;white-space:nowrap;margin:0}
.dk--yd #dk-s[hidden]{display:none}
.dk--yd .ls-dock__btn{min-width:0;padding:0 24px}
@media (max-width:359px){.dk--yd .ls-dock__btn{padding:0 16px}.ls-dock .dk{gap:12px}.dk--yd .ls-dock__price b{letter-spacing:-.03em}}

/* 상담 시트 */
.yd-sheet{position:fixed;inset:0;z-index:90}
.yd-sheet[hidden]{display:none}
.yd-sheet__scrim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.yd-sheet__p{position:absolute;left:0;right:0;bottom:0;max-height:92vh;overflow:auto;background:#fff;border-radius:16px 16px 0 0;padding:24px var(--g) calc(24px + env(safe-area-inset-bottom))}
.yd-sheet__p h3{font-size:18px;line-height:26px;font-weight:700;letter-spacing:-.02em;padding-right:52px}
.yd-x{position:absolute;top:12px;right:calc(var(--g) - 12px);width:44px;height:44px;border:0;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
.yd-copy{margin-top:16px;border:1px solid #EBEBEB;border-radius:16px;padding:16px;font-size:15px;line-height:24px;color:#111}
.yd-kakao{display:flex;align-items:center;justify-content:center;width:100%;height:52px;margin-top:16px;border:0;border-radius:999px;background:#FEE500;color:#191919;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none}
.yd-sheet__hint{margin-top:16px;font-size:14px;line-height:20px;color:#555;text-align:left;word-break:keep-all;text-wrap:pretty}
/* 복사가 안 됐을 때만(대표 11-14 00:55 아이폰 버그): 안내 바로 아래 '내용 복사' = 사이트 보조 버튼 .btn.btn--line에 회색 테두리(칸 알약 #DDDDDD와 같음).
   보라 ✕ — 시트의 주 행동은 카카오 노랑. 높이 48 · 글자 16 · 폭 = 카카오 버튼과 같게. .btn이 display를 정해서 [hidden]을 따로 숨김 · 버튼 아래 '확정' 줄은 12 띄움 */
.yd-sheet__p .yd-cp{width:100%;height:48px;margin-top:12px;padding:0 20px;border:1px solid #DDDDDD;background:#fff;color:#111;font-size:16px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.yd-sheet__p .yd-cp[hidden]{display:none}
.yd-sheet__p .yd-cp:not([hidden])+.yd-sheet__ok{margin-top:12px}
@media (hover:hover){.yd-sheet__p .yd-cp:hover{background:#F7F7F7;color:#111}}
/* 안내 바로 아래 한 줄(다음 판 11-13 · 기획 가격안 '확정' 줄) — 안내와 같은 14px 회색 */
.yd-sheet__ok{margin-top:4px;font-size:14px;line-height:20px;color:#555;word-break:keep-all}
@media (min-width:960px){.yd-sheet__p{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:480px;border-radius:16px;padding:28px}.yd-x{right:16px}}