/* 연대관 목록(/courts/yeondaegwan · 한국어만) — 디자인 리드 확정판 목록.html의 칩 · 알약 기본값 + tools/list.css 값 그대로.
   이 쪽에만 붙는다(route.css3). 시안의 html[data-f="yd"] .ls-list(코트 목록에 필터를 켠 상태)는 따로 된 쪽이라 .p-courts .ls-list--yd로.
   스펙: docs/spec/BRAND_COURTS_YEONDAEGWAN.md */
.yd-chip{flex:none;min-height:44px;padding:0 16px;border:1px solid #DDDDDD;border-radius:999px;background:#fff;color:#111;font-family:inherit;font-size:15px;line-height:22px;font-weight:500;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.yd-chip[aria-pressed="true"]{background:#111;border-color:#111;color:#fff}
.yd-chip:focus-visible{outline:2px solid #111;outline-offset:2px}
.yd-pill{flex:none;display:block;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.92);font-size:14px;line-height:20px;font-weight:700;color:#111;white-space:nowrap}
.yd-pill--dc{color:#04603F}

/* 다음 판(대표 11-13 · 디자인 정본 '5 진입 카드 · 랜딩' 만든 값 3절): 머리 '← 연대관'(레이아웃 route.backHead) — 사이트 머리 .hd__top wrap 구조 · 높이 --hd1(56 · 웹 64) · 내려도 숨지 않음.
   ← 44×44 · 화살표 왼끝 = 본문 왼끝(--g) */
.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)}
/* 대표 11-13 「뒤로가기 위치가 좀 이상한데 너무 높아서」 · 「바로 prod배포」: 폰은 머리 줄(← · 연대관)을 통째로 8px 내림(머리 배경 안 패딩 — 스크롤 때 위 틈 0)(둘은 같은 세로 가운데 그대로) + 상태 표시줄 밑까지 그려지는 브라우저(viewport-fit=cover)에서 안전 영역만큼 더 */
@media (max-width:959px){.hd.hd--back{padding-top:calc(8px + env(safe-area-inset-top,0px))}}
/* 첫 화면: 제목(26 · 폰 쉼표 뒤 줄바꿈) + 정보 한 줄(15 · #555) → 칩 → 줄 카드. 간격 머리↔제목 24 · 제목↔정보 8 · 정보↔칩 28 · 칩↔목록 28(웹 48 · 10 · 32 · 32) */
.ydl-intro{padding-top:16px} /* 폰: 머리 64가 됐으니 머리 ↔ 제목 24 → 16 · 제목 위 80 그대로(디자인 리드 11-13 뒤로가기 값) */
.ydl-h1{margin:0;font-size:26px;line-height:34px;font-weight:800;letter-spacing:-.03em;color:#111;word-break:keep-all}
.ydl-info{margin:8px 0 0;font-size:15px;line-height:22px;color:#555;word-break:keep-all}
/* 맺음 질문 3(사이트 .ls-faq 그대로) — 목록 바로 다음이라 위 여백만 줄임 */
.p-courts .ls-faq{padding-top:40px}
@media (min-width:960px){
  .ydl-intro{padding-top:48px}
  .ydl-h1{font-size:36px;line-height:46px}
  .ydl-h1 br{display:none}
  .ydl-info{margin-top:10px;font-size:17px;line-height:26px}
}

/* 핵심 판 목록 — 줄 카드 값은 사이트 /courts/all 폰 줄 카드 그대로(사진 128 · 반경 12 · 간격 14) */
.yd-bar{padding-top:28px;padding-bottom:0}
/* 지역 칩 한 줄 · 가로로 넘김(에어비앤비 카테고리 줄 결) · 화면 끝까지 흘러 다음 칩이 잘려 보임 */
.yd-regions{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 calc(-1 * var(--g,24px));padding:2px var(--g,24px);scroll-padding:0 var(--g,24px)}
.yd-regions::-webkit-scrollbar{display:none}
.yd-chip--r{padding:0 16px}
.p-courts .ls-list--yd{padding-top:28px}
.yd-only{margin:0;padding:0}
/* 한 격자(할인 5곳이 맨 앞 · 묶음 사이 빈칸 없음 · 다음 판). 금액 줄 '야외 6개월 1,300,000원부터'(약 171px)가 한 줄이 되게
   2열은 768부터 · 3열은 1200부터(열 사이 32 · 디자인 정본 '웹 1200 이상 3열') — 600 · 960에서 열을 먼저 늘리면 글 칸이 140px대라 꺾임 */
.yd-rows{display:grid;grid-template-columns:1fr;gap:24px;list-style:none;margin:0;padding:0}
@media (min-width:768px){.yd-rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media (min-width:960px){.yd-bar{padding-top:32px}.p-courts .ls-list--yd{padding-top:32px}}
@media (min-width:1200px){.yd-rows{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}}
.yd-row{display:grid;grid-template-columns:128px minmax(0,1fr);gap:14px;align-items:center;min-height:118px;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.yd-row__ph{display:block;position:relative;width:128px;aspect-ratio:13/12;border-radius:12px;overflow:hidden;background:#F2F2F2}
.yd-row__ph img{display:block;width:100%;height:100%;object-fit:cover}
.yd-row:active .yd-row__ph{transform:scale(.98)}
.yd-row__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.yd-row__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.yd-row__where{min-width:0;font-size:15px;line-height:20px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#111}
.yd-row__rate{flex:none;font-size:14px;line-height:20px;color:#111}
.yd-row__t{font-size:15px;line-height:20px;color:#555;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.yd-row__price{font-size:14px;line-height:20px;color:#555}
.yd-row__price b{font-size:15px;font-weight:700;color:#111}
.yd-row__pill{display:block;margin-top:4px}
.yd-row__pill .yd-pill{display:inline-block;padding:2px 10px;background:#E6F6EE;color:#04603F}
@media (hover:hover){.yd-row:hover .yd-row__where{text-decoration:underline;text-underline-offset:3px}}
/* 폰 320: 본문 148 → 금액 한 줄 · 이름 안 잘림 (UI 검증 값) */
@media (max-width:339px){.yd-row{grid-template-columns:112px minmax(0,1fr);gap:12px;min-height:0}.yd-row__ph{width:112px}.yd-row__top{flex-wrap:wrap}.yd-row__price{white-space:nowrap;letter-spacing:-.03em}}
/* 확정판(11-13): 금액 단위 '1회' → '2시간'(글 약 18px 김). 여러 열 카드는 320 규칙과 같은 사진 112 · 간격 12로 본문을 16px 넓혀 금액 줄이 8 판보다 더 꺾이지 않게 */
@media (min-width:600px){.yd-row{grid-template-columns:112px minmax(0,1fr);gap:12px}.yd-row__ph{width:112px}}
/* 다음 판: 금액이 길어짐 → 폰 374 이하(320 · 360)는 사진 96 · 간격 12 · 금액 굵은 글 14(93곳 한 줄 · 디자인 정본은 339 이하 — 360에서 5곳이 꺾여 넓힘)
   웹 960 이상은 같은 줄 이름 윗선을 맞춤(글 위 맞춤 · 폰은 가운데 그대로) */
@media (max-width:374px){.yd-row{grid-template-columns:96px minmax(0,1fr);gap:12px}.yd-row__ph{width:96px}.yd-row__price b{font-size:14px}}
@media (min-width:960px){.yd-row{align-items:start}}
.yd-none{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8px;background:#F2F2F2;color:#555;font-size:14px;line-height:20px;font-weight:600;text-align:center}