/* 홈(/) 전용 — 서비스 카드 큰 글씨 + "실제 후기" 큰 카드 그리드. 어르신도 편하게 읽도록 글자 크고, 대비 높고, 터치 영역 크게.
   팔레트: 파랑 #0A6CFF(포인트)·#0A5BC4(글자) · 하늘 #EAF6FF · 잉크 #0B2A4A · 보조 #3C5A78. 인라인 style 없음(CSP style-src 'self').
   .hr-* 클래스는 홈 후기 섹션에만 있고, 서비스 카드 규칙은 이 섹션이 있는 홈에서만 :has() 로 적용한다(/villas/ 불변). */

/* ① 서비스 카드 3장 — 제목 24px(모바일 22px), 본문·체크 18px, 버튼 56px+ */
body[data-page="home"]:has(.hr-section) .home-services-section{padding:48px 0 24px}
body[data-page="home"]:has(.hr-section) .home-services-section .section-top h2{font-size:clamp(1.75rem,5vw,2.25rem);letter-spacing:-.03em;color:#0b2a4a}
body[data-page="home"]:has(.hr-section) .services-grid{grid-template-columns:1fr;gap:24px}
@media(min-width:1000px){body[data-page="home"]:has(.hr-section) .services-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
body[data-page="home"]:has(.hr-section) .service-card{border-radius:24px;border:2px solid #d4e6f7}
body[data-page="home"]:has(.hr-section) .service-card .card-thumb{aspect-ratio:16/9}
@media(min-width:640px) and (max-width:999px){body[data-page="home"]:has(.hr-section) .service-card .card-thumb{aspect-ratio:21/9}}
body[data-page="home"]:has(.hr-section) .service-card .badge{font-size:1rem;padding:6px 14px;font-weight:800}
body[data-page="home"]:has(.hr-section) .service-card .card-content{padding:24px}
body[data-page="home"]:has(.hr-section) .service-card h3{font-size:1.375rem;line-height:1.35;margin-bottom:12px;letter-spacing:-.02em}
body[data-page="home"]:has(.hr-section) .service-card p.card-desc{font-size:1.125rem;line-height:1.65;margin-bottom:16px;color:#3c5a78}
body[data-page="home"]:has(.hr-section) .service-card ul.card-bullets{gap:10px;margin-bottom:22px}
body[data-page="home"]:has(.hr-section) .service-card ul.card-bullets li{font-size:1.125rem;line-height:1.5;align-items:flex-start;gap:10px;color:#0b2a4a}
body[data-page="home"]:has(.hr-section) .service-card ul.card-bullets li svg{width:22px;height:22px;margin-top:2px}
body[data-page="home"]:has(.hr-section) .service-card .card-cta{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 20px;border-radius:16px;background:#0a5bc4;color:#fff;font-size:1.125rem;font-weight:800}
@media(min-width:640px){body[data-page="home"]:has(.hr-section) .service-card h3{font-size:1.5rem}}
@media(min-width:1000px){body[data-page="home"]:has(.hr-section) .service-card .card-content{padding:26px 24px}}
body[data-page="home"]:has(.hr-section) .service-card:hover .card-thumb img{transform:none}
@media(prefers-reduced-motion:reduce){body[data-page="home"]:has(.hr-section) .service-card{transition:none}body[data-page="home"]:has(.hr-section) .service-card:hover{transform:none}}

/* ② 실제 후기 */
.hr-section{padding:56px 0 64px;background:linear-gradient(180deg,#fff 0,#f3faff 14%,#f3faff 100%);scroll-margin-top:72px}
.hr-head{text-align:center;margin:0 auto 32px;max-width:760px}
.hr-count{display:inline-block;margin:0 0 14px;padding:8px 18px;border-radius:999px;background:#fff;border:2px solid #b9d8f7;color:#0a5bc4;font-size:1.125rem;font-weight:800;letter-spacing:-.01em}
.hr-head h2{margin:0;font-size:clamp(1.875rem,6.4vw,2.75rem);line-height:1.28;letter-spacing:-.035em;font-weight:800;color:#0b2a4a;text-wrap:balance}
.hr-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
.hr-grid-more{margin-top:22px}
.hr-grid[hidden],.hr-expand[hidden]{display:none!important}
@media(min-width:700px){.hr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}.hr-grid-more{margin-top:26px}}

.hr-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #d6e0ec;border-radius:16px;overflow:hidden;box-shadow:0 1px 2px #0b2a4a0f}
.hr-photo{display:block;width:calc(100% + var(--hr-pad)*2);max-width:none;margin:2px calc(var(--hr-pad)*-1);height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:0;cursor:zoom-in}
.hr-photo:focus-visible{outline:4px solid #0a5bc4;outline-offset:-4px}
.hr-body{--hr-pad:20px;position:relative;padding:var(--hr-pad);display:flex;flex-direction:column;gap:14px;min-width:0}
.hr-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hr-who{display:flex;align-items:center;gap:12px;min-width:0}
.hr-initial{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#e3ebf5;color:#4a6785;font-size:1.25rem;font-weight:700;line-height:1}
.hr-name{font-size:1.375rem;font-weight:800;color:#0b2a4a;line-height:1.3;overflow-wrap:anywhere}
.hr-stars{font-size:1.5rem;line-height:1;letter-spacing:2px;color:#0a5bc4;white-space:nowrap}
.hr-text{margin:0;font-size:1.25rem;line-height:1.75;color:#0b2a4a;white-space:pre-line;overflow-wrap:anywhere;word-break:keep-all}
.hr-text.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
.hr-text.is-open{display:block;overflow:visible}
.hr-expand{align-self:flex-start;min-height:48px;padding:0 20px;border-radius:14px;border:2px solid #9cc4f5;background:#fff;color:#0a5bc4;font:inherit;font-size:1.0625rem;font-weight:800;cursor:pointer}
.hr-expand:hover{background:#eaf6ff}
.hr-expand:focus-visible,.hr-more-btn:focus-visible,.hr-all-link:focus-visible{outline:4px solid #0a5bc4;outline-offset:3px}

/* 답글 — "사장님 답글" 스타일: 카드 하단의 연한 회색 파랑 들여쓴 박스, 왼쪽 위 ↳ 표식 + 작은 로고(24px) + 라벨. 말풍선 꼬리·큰 아바타 없음. */
.hr-reply{margin:6px 0 0 12px;padding:14px 16px 16px;background:#f1f5fa;border:1px solid #dde6f0;border-radius:12px}
.hr-reply-head{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.hr-reply-mark{flex:none;font-size:1.25rem;line-height:1;color:#4a6785;font-weight:700}
.hr-avatar{flex:none;width:24px;height:24px;border-radius:50%;overflow:hidden;background:#fff}
.hr-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.hr-reply-label{margin:0;font-size:1rem;font-weight:800;color:#0a5bc4;line-height:1.4}
.hr-reply-text{margin:0;font-size:1.1875rem;line-height:1.7;color:#0b2a4a;overflow-wrap:anywhere;word-break:keep-all}

/* 모바일(≤640px): 답글 박스는 카드 안쪽 전체 폭(들여쓰기 없음) */
@media(max-width:640px){
  .hr-reply{margin-left:0}
}

.hr-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}
.hr-actions .button{min-height:56px;padding:0 28px;font-size:1.1875rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;border-radius:16px}
.hr-actions .hr-more-btn{min-width:min(100%,320px);cursor:pointer}
@media(max-width:699px){.hr-actions{flex-direction:column}.hr-actions .button{width:100%}}

@media(min-width:700px){
  .hr-section{padding:72px 0 80px}
  .hr-head{margin-bottom:40px}
  .hr-body{--hr-pad:28px;gap:16px}
  .hr-text,.hr-reply-text{font-size:1.25rem}
  .hr-reply{padding:16px 20px 18px}
}
@media(min-width:1000px){
  .hr-text{font-size:1.3125rem}
  .hr-reply-text{font-size:1.1875rem}
  .hr-body{--hr-pad:32px}
}
@media(prefers-reduced-motion:reduce){.hr-card,.hr-expand,.hr-actions .button{transition:none}}

/* ③ 가로 1행 레일 (2026-10-09 재디자인) — 후기 카드를 한 줄로 늘어놓고 좌우로 밀어 본다. 후기 문구·링크·버튼은 그대로, 배치만 바뀐다.
   레일 자체가 둥근 패널이고, 다음 카드가 살짝 보여 더 있다는 걸 알려 준다. 키보드: 레일에 포커스(Tab) 후 ←/→ 로 스크롤. */
.hr-grid{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:16px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 16px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#9cc4f5 transparent;padding:16px;background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid #d6e0ec;border-radius:24px;box-shadow:0 6px 24px #0b2a4a14}
.hr-grid[hidden]{display:none!important}
.hr-grid:focus-visible{outline:4px solid #0a5bc4;outline-offset:3px}
.hr-grid-more{margin-top:20px}
.hr-grid>.hr-card{flex:0 0 min(84%,320px);scroll-snap-align:start;border-radius:16px}
.hr-grid .hr-body{--hr-pad:20px;gap:12px;flex:1}
.hr-grid .hr-top{flex-direction:column;align-items:flex-start;gap:8px}
.hr-grid .hr-text.is-clamped{-webkit-line-clamp:5}
.hr-grid .hr-reply{margin:auto 0 0}
.hr-grid .hr-text+.hr-expand,.hr-grid .hr-expand+.hr-photo,.hr-grid .hr-text+.hr-expand+.hr-photo{margin-top:0}
.hr-hint{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 0;font-size:1.0625rem;line-height:1.5;color:#3c5a78;text-align:center}
.hr-hint span{font-size:1.5rem;line-height:1;color:#0a5bc4;font-weight:700}
@media(min-width:700px){
  .hr-grid{gap:20px;padding:24px;scroll-padding:0 24px}
  .hr-grid>.hr-card{flex-basis:380px}
  .hr-grid .hr-body{--hr-pad:24px}
}
@media(min-width:1000px){
  .hr-grid>.hr-card{flex-basis:420px}
}
@media(prefers-reduced-motion:reduce){.hr-grid{scroll-behavior:auto}}

/* ④ 작은 요약 카드 + 전체 후기 모달 (2026-10-09 재디자인) — 카드는 이름·별점·짧은 발췌·"전체 읽기"만. 사진·우리 답글·전체 문구는 모달에서 본다.
   (카드 DOM 에는 그대로 있고 화면에서만 숨긴다 — 모달이 복제해 보여 준다.) 글자는 카드 16px, 모달은 기존 큰 글씨 규칙을 그대로 쓴다. */
.hr-grid{gap:12px;padding:12px;border-radius:20px}
.hr-grid>.hr-card{flex:0 0 min(68%,244px);border-radius:14px;cursor:pointer;box-shadow:0 1px 3px #0b2a4a14}
.hr-grid .hr-photo,.hr-grid .hr-reply{display:none}
.hr-grid .hr-body{--hr-pad:14px;gap:8px}
.hr-grid .hr-top{flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px 10px}
.hr-grid .hr-initial{width:34px;height:34px;font-size:1rem}
.hr-grid .hr-who{gap:8px}
.hr-grid .hr-name{font-size:1rem}
.hr-grid .hr-stars{font-size:1.0625rem;letter-spacing:1px;flex-basis:100%}
.hr-grid .hr-text{font-size:1rem;line-height:1.6}
.hr-grid .hr-text.is-clamped{-webkit-line-clamp:4;line-clamp:4}
.hr-grid .hr-expand{margin-top:auto;min-height:44px;padding:0 14px;border-radius:12px;font-size:1rem;display:inline-flex;align-items:center;gap:4px}
.hr-grid .hr-expand::after{content:"\203A";font-size:1.25rem;line-height:1}
@media(min-width:700px){
  .hr-grid{gap:16px;padding:16px;scroll-padding:0 16px}
  .hr-grid>.hr-card{flex-basis:272px}
  .hr-grid .hr-body{--hr-pad:16px}
}
@media(min-width:1000px){
  .hr-grid>.hr-card{flex-basis:288px}
  .hr-grid .hr-text{font-size:1rem}
}

body.hr-modal-open{overflow:hidden}
.hr-modal-backdrop{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-end;justify-content:center;background:#0b2a4a99;padding:0}
.hr-modal{position:relative;width:100%;max-width:640px;max-height:90vh;max-height:90dvh;overflow-y:auto;overscroll-behavior:contain;background:#fff;border-radius:24px 24px 0 0;box-shadow:0 -8px 32px #0b2a4a40}
.hr-modal:focus-visible{outline:none}
.hr-modal-close{position:sticky;top:0;float:right;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin:8px 8px 0 0;border:2px solid #9cc4f5;border-radius:50%;background:#fff;color:#0a5bc4;font:inherit;font-size:1.75rem;line-height:1;cursor:pointer}
.hr-modal-close:hover{background:#eaf6ff}
.hr-modal-close:focus-visible{outline:4px solid #0a5bc4;outline-offset:2px}
.hr-modal .hr-modal-body{--hr-pad:20px;padding:12px var(--hr-pad) 28px;display:flex;flex-direction:column;gap:14px}
.hr-modal .hr-top{padding-right:52px}
.hr-modal .hr-photo{display:block;cursor:default}
.hr-modal .hr-reply{display:block}
@media(min-width:700px){
  .hr-modal-backdrop{align-items:center;padding:24px}
  .hr-modal{border-radius:24px;max-height:86vh;max-height:86dvh}
  .hr-modal .hr-modal-body{--hr-pad:28px}
}
@media(prefers-reduced-motion:reduce){.hr-card,.hr-modal,.hr-modal-close{transition:none;animation:none}}

/* ⑤ 후기 레일 뒤 흰 바탕 제거 (2026-10-09, 대표 지시 chị Su) — 후기 카드마다 흰색은 그대로 두고, 카드들을 감싸던 흰 그라데이션 틀·테두리·그림자만 없앤다.
   카드는 구역 배경(#e9f5ff) 위에 바로 놓인다. 문구·링크·간격·스크롤은 그대로. 롤백: 이 블록 삭제. */
.hr-grid{background:none;border:0;box-shadow:none}