@charset "utf-8";

/* ==========================================================
   A/S 안내 위쪽: 접수 안내 + 지점 목록 · 네이버 지도 (Views/Partials/ServiceMap.cshtml)
   지도 부분은 YHB.Umbraco 의 css/network.css 를 옮기고 색을 동광보일러 색(DESIGN.md Corporate Blue)으로 바꿨다.
   YHB 는 토큰(--sp-* · --fs-* · 색)과 바탕 재설정을 reset.css 에 두므로, 여기서는 이 덩어리 안에만 같은 값을 둔다.
   ========================================================== */
/* ==========================================================
   1. A/S 접수 안내 (지도 위). 제목은 아래 기존 표와 같은 .tit(content.css)을 h2 로 쓴다.
   ========================================================== */
.pages .as-tit{margin-top:0;font-family:inherit;font-weight:400;color:#1c2025;}
/* 넓은 화면은 제목 아래 간격을 다음 덩어리가 갖고, 1200 이하는 기존 .tit 규칙(가운데 · 아래 짧은 선 · 아래 60px)을 그대로 따른다 */
@media (min-width:1201px){
  .pages .as-tit{margin-bottom:0;}
  .as-apply__grid,
  .as-find-h + .store-finder{margin-top:40px;}
}
.as-apply{margin-bottom:100px;}
.as-apply__grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:20px;}
.as-apply__card{
  min-height:220px;padding:32px;box-sizing:border-box;border-radius:12px;
  display:flex;flex-direction:column;gap:10px;text-align:left;
}
.as-apply__card h3{margin:0;font-family:inherit;font-size:18px;font-weight:700;line-height:1.4;color:inherit;}
.as-apply__card p{margin:0;font-size:16px;line-height:1.7;color:#333a42;}
.as-apply__card--tel{background:#006dbb;color:#fff;}
.as-apply__card--tel p{color:rgba(255,255,255,.9);font-size:15px;}
/* 옛 공통 스타일(default.css)의 a:hover · a:focus{color:#000} 을 이기려고 상태까지 같이 적는다 */
.as-apply .as-apply__tel,
.as-apply .as-apply__tel:hover,
.as-apply .as-apply__tel:focus{color:#fff;font-size:40px;font-weight:700;line-height:1.1;letter-spacing:-.01em;text-decoration:none;}
.as-apply .as-apply__tel:hover{text-decoration:underline;text-underline-offset:6px;}
.as-apply__card--tel .as-apply__note{margin-top:auto;}
.as-apply__card--online{background:#f4f5f6;color:#1c2025;}
.as-apply .as-apply__go,
.as-apply .as-apply__go:hover,
.as-apply .as-apply__go:focus{
  margin-top:auto;align-self:flex-start;height:52px;padding:0 24px;box-sizing:border-box;
  display:inline-flex;align-items:center;gap:10px;border-radius:26px;
  background:#1c2025;color:#fff;font-size:16px;font-weight:700;text-decoration:none;
}
.as-apply .as-apply__go:hover{background:#006dbb;}
.as-apply__go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.as-apply a:focus-visible{outline:2px solid #1c2025;outline-offset:3px;}
.as-apply__card--tel a:focus-visible{outline-color:#fff;}

@media (max-width:1024px){
  .as-apply__grid{grid-template-columns:minmax(0, 1fr);gap:12px;}
  .as-apply__card{min-height:0;padding:24px;}
  .as-apply__card--tel .as-apply__note{margin-top:4px;}
}
@media (max-width:640px){
  .as-apply{margin-bottom:60px;}
  .as-apply .as-apply__tel{font-size:34px;}
}

/* ==========================================================
   2. 지점 찾기
   ========================================================== */
.store-finder{
  --inner:1600;
  --color-primary:#006dbb;     /* Corporate Blue */
  --color-secondary:#00578f;   /* 누를 때 한 단계 짙게 */
  --color-tint:#eaf3fa;        /* 고른 줄 · 배지 바탕 */
  --color-ink:#1c2025;
  --font-body:'Pretendard Variable','Pretendard',sans-serif;
  --fs-14:clamp(12px, calc(14 / var(--inner) * 100vw), 14px);
  --fs-16:clamp(14px, calc(16 / var(--inner) * 100vw), 16px);
  --fs-18:clamp(15px, calc(18 / var(--inner) * 100vw), 18px);
  --sp-20:clamp(10px, calc(20 / var(--inner) * 100vw), 20px);
  --sp-30:clamp(15px, calc(30 / var(--inner) * 100vw), 30px);

  display:flex;gap:var(--sp-30);align-items:stretch;
  height:clamp(520px, calc(720 / var(--inner) * 100vw), 720px);
  margin-bottom:100px;
  font-family:var(--font-body);font-size:var(--fs-16);line-height:1.75em;
  color:#505050;letter-spacing:-.03em;word-break:keep-all;text-align:left;
}

/* YHB reset.css 가 해 주던 것 (이 사이트의 부트스트랩 기본값을 덮는다) */
.store-finder *{margin:0;box-sizing:border-box;}
.store-finder a{text-decoration:none;}
.store-finder button{font:inherit;}

/* ---------- 좌측 : 검색 / 필터 / 목록 ---------- */
.store-finder__aside{
  width:400px;flex:none;display:flex;flex-direction:column;
  border:1px solid #ddd;border-radius:16px;overflow:hidden;background:#fff;
}

.store-search{display:flex;gap:5px;padding:var(--sp-20);border-bottom:1px solid #eee;}
.store-search__input{
  flex:1;min-width:0;height:44px;padding:0 14px;
  border:1px solid #ddd;border-radius:8px;background:#fff;
  font-family:inherit;font-size:var(--fs-16);color:#505050;
}
.store-search__input:focus{outline:none;border-color:var(--color-primary);}
.store-search__btn{
  flex:none;width:60px;height:44px;border:0;border-radius:8px;
  background:var(--color-primary);color:#fff;
  font-family:inherit;font-size:var(--fs-16);font-weight:600;cursor:pointer;
}
.store-search__btn:hover{background:var(--color-secondary);}

.store-filter{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:0 var(--sp-20) 16px;
}
/* <a> 로 만들어 URL 이 바뀌고 크롤러가 따라갈 수 있게 했다 */
.store-filter__btn{
  display:inline-flex;align-items:center;
  padding:0 14px;height:32px;border:1px solid #ddd;border-radius:100px;
  background:#fff;color:#767676;text-decoration:none;
  font-family:inherit;font-size:var(--fs-14);font-weight:500;cursor:pointer;
  transition:all .2s;
}
/* 이 사이트의 옛 공통 스타일(common/css/default.css)이 a:focus{color:#000} 이라(0,1,1),
   누른 뒤 초점이 남으면 단일 클래스(0,1,0) 글자색이 지고 검정이 된다. :focus 를 같이 적어 이긴다. */
.store-filter__btn:focus{color:#767676;}
.store-filter__btn:hover{border-color:var(--color-primary);color:var(--color-primary);}

/* 활성 상태.
   :hover(0,2,0) 가 단일 클래스(0,1,0) 보다 우선순위가 높아 글자색이 배경색과 같아지므로
   --active:hover · --active:focus 를 함께 명시해 흰 글씨를 유지한다. */
.store-filter__btn--active,
.store-filter__btn--active:hover,
.store-filter__btn--active:focus{
  background:var(--color-primary);border-color:var(--color-primary);
  color:#fff;font-weight:600;
}
/* 활성 상태에서도 hover 피드백은 남긴다 */
.store-filter__btn--active:hover{background:var(--color-secondary);border-color:var(--color-secondary);}

.store-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid #eee;}
/* 구분(전체 · CS센터 · 서비스점): 검색 바로 아래, 지역 단추 위 한 줄을 셋으로 나눈 단추(탭처럼 큰 갈래). 지역 단추(파랑 채움)와 다른 모양. */
.store-kind{
  display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:3px;
  margin:var(--sp-20) var(--sp-20) 12px;padding:3px;border-radius:10px;background:#f1f3f5;
}
.store-kind[hidden]{display:none;}
.store-kind__btn{
  height:38px;padding:0 6px;border:0;border-radius:8px;background:transparent;
  font-family:inherit;font-size:var(--fs-14);font-weight:500;color:#4a525c;white-space:nowrap;cursor:pointer;
}
.store-kind__btn:hover{color:var(--color-primary);}
.store-kind__btn[aria-pressed="true"]{background:#fff;color:var(--color-primary);font-weight:700;box-shadow:0 1px 3px rgba(28,32,37,.14);}
.store-kind__btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px;}
.store-kind__n{font-weight:400;color:#5b6470;}
.store-kind__btn[aria-pressed="true"] .store-kind__n{color:inherit;}

/* 개수 줄. 목록을 내려도 위에 붙어 있다. */
.store-list__bar{
  position:sticky;top:0;z-index:1;
  padding:12px var(--sp-20);
  background:#fafafa;border-bottom:1px solid #eee;
}
.store-list__count{font-size:var(--fs-14);color:#686868;}
.store-list__count strong{color:var(--color-primary);font-weight:700;}
.store-list__empty{padding:60px 20px;text-align:center;color:#999;font-size:var(--fs-14);line-height:1.7;}

.store-item{
  display:block;width:100%;padding:var(--sp-20);
  border:0;border-bottom:1px solid #eee;background:#fff;
  font-family:inherit;text-align:left;cursor:pointer;transition:background .15s;
}
.store-item:hover{background:#fafafa;}
/* 부트스트랩이 마우스로 눌러도 굵은 테두리를 그려서, 키보드로 왔을 때만 테두리를 보인다 */
.store-item:focus{outline:0;}
.store-item:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;}
.store-item--active{background:var(--color-tint);}
.store-item--active .store-item__name{color:var(--color-primary);}

.store-item__head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.store-item__name{font-size:var(--fs-18);font-weight:700;color:#333;line-height:1.3;}
/* 구분 배지: 지도 핀과 같게 CS센터 = 파랑 채움, 서비스점 = 파란 테두리 */
.store-item__badge{
  flex:none;padding:0 7px;border:1px solid var(--color-primary);border-radius:4px;
  background:#fff;color:var(--color-primary);
  font-size:12px;font-weight:700;line-height:20px;
}
.store-item__badge--cs{background:var(--color-primary);color:#fff;}
.store-item__addr{font-size:var(--fs-14);color:#767676;line-height:1.5;}
/* 안내 태그(주차, 방문 접수 …): 목록 줄 아래와 말풍선 아래에 같은 꼬리표 */
.store-item__tags,
.store-info__tags{display:flex;flex-wrap:wrap;gap:4px;}
.store-item__tags{margin-top:10px;}
.store-info__tags{margin-top:12px;padding-top:12px;border-top:1px solid #eee;}
.store-tag{
  display:inline-flex;align-items:center;height:24px;padding:0 9px;
  border:1px solid #d5dae0;border-radius:100px;background:#fff;
  font-size:12px;font-weight:500;line-height:1;color:#333a42;white-space:nowrap;
}

.store-item__tel{
  display:inline-block;margin-top:6px;
  font-size:var(--fs-14);font-weight:600;color:#333;
}
.store-item__tel:hover{color:var(--color-primary);text-decoration:underline;}

/* ---------- 우측 : 지도 ---------- */
.store-finder__map{
  flex:1;min-width:0;position:relative;
  border:1px solid #ddd;border-radius:16px;overflow:hidden;background:#eef1f4;
  overscroll-behavior:contain;   /* 지도 안 스크롤이 페이지로 이어지지 않게 */
}
.store-map{width:100%;height:100%;}

/* 지도 핀: 동광보일러 파랑. CS센터 = 채운 핀, 서비스점 = 흰 핀 + 파란 테두리(색이 아니라 채움으로도 갈린다).
   네모를 -45도 돌려 아래 끝이 뾰족하게 만든다. 끝점이 (15, 36) 이라 service-map.js 의 anchor 와 맞춘다. */
.store-pin{
  position:relative;display:block;width:30px;height:30px;box-sizing:border-box;
  border:2px solid #fff;border-radius:50% 50% 50% 0;background:var(--color-primary);
  transform:rotate(-45deg);box-shadow:-1px 2px 6px rgba(12,20,30,.35);
  transition:transform .15s;cursor:pointer;
}
.store-pin::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff;}
.store-pin--service{background:#fff;border-color:var(--color-primary);}
.store-pin--service::after{background:var(--color-primary);}
.store-pin:hover,
.store-pin.is-on{transform:rotate(-45deg) scale(1.22);}
.store-pin.is-on{box-shadow:-2px 4px 10px rgba(12,20,30,.45);}

/* 핀 보기 겸 구분 거르기: 누르면 그 구분만(다시 누르면 전체). 고르면 다른 쪽은 흐리게. */
.store-legend{
  position:absolute;left:12px;top:12px;z-index:1;
  display:flex;gap:2px;padding:4px;border-radius:10px;
  background:rgba(255,255,255,.96);box-shadow:0 1px 4px rgba(12,20,30,.18);
}
.store-legend__btn{
  height:36px;padding:0 12px;border:0;border-radius:8px;background:transparent;
  display:flex;align-items:center;gap:8px;
  font-family:inherit;font-size:13px;font-weight:600;color:#333a42;cursor:pointer;
}
.store-legend__btn:hover{background:#f1f3f5;}
.store-legend__btn[aria-pressed="true"]{background:var(--color-tint);color:var(--color-primary);font-weight:700;}
.store-legend:has([aria-pressed="true"]) .store-legend__btn[aria-pressed="false"]{opacity:.55;}
.store-legend__btn:focus{outline:0;}
.store-legend__btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px;}
.store-legend .store-pin{width:14px;height:14px;border-width:1.5px;box-shadow:none;cursor:inherit;}
.store-legend .store-pin::after{inset:3px;}
.store-legend .store-pin:hover{transform:rotate(-45deg);}
.store-finder--no-map .store-legend{display:none;}

/* 지도 SDK 키가 없을 때 안내 */
.store-map__fallback{
  position:absolute;inset:0;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:30px;text-align:center;color:#767676;font-size:var(--fs-14);line-height:1.7;
}
.store-finder--no-map .store-map__fallback{display:flex;}
.store-finder--no-map .store-map{display:none;}
.store-map__fallback code{
  padding:2px 6px;border-radius:4px;background:#eef1f4;color:#333;
  font-family:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;font-size:13px;
}

/* 지도 말풍선: 색 머리(지점명 · 구분 · 닫기) + 주소 · 대표번호 줄.
   말풍선 틀(네이버 InfoWindow)은 투명으로 두고 이 덩어리가 바탕 · 모서리 · 그림자를 가진다(service-map.js).
   본문은 마우스 이벤트를 통과시켜 지도(확대/축소·드래그)가 그대로 동작하게 한다.
   클릭이 필요한 요소만 pointer-events 를 되살린다. */
.store-info{
  position:relative;
  width:300px;max-width:calc(100vw - 80px);
  border-radius:10px;background:#fff;
  box-shadow:0 6px 20px rgba(28,32,37,.18);
  font-family:var(--font-body);letter-spacing:-.02em;text-align:left;
  pointer-events:none;
}
/* 꼬리: 말풍선 아래 가운데에서 핀 머리를 가리킨다(네이버 꼬리는 껐다, service-map.js) */
.store-info::after{
  content:"";position:absolute;left:50%;bottom:-9px;margin-left:-9px;
  border:9px solid transparent;border-bottom:0;border-top-color:#fff;
  filter:drop-shadow(0 3px 2px rgba(28,32,37,.10));
}
.store-info__close,
.store-info__tel{pointer-events:auto;}

.store-info__head{
  display:flex;align-items:center;gap:8px;border-radius:10px 10px 0 0;
  padding:12px 8px 12px 16px;background:var(--color-primary);color:#fff;
}
.store-info__name{flex:1;min-width:0;margin:0;font-size:16px;font-weight:700;line-height:1.3;color:#fff;}
.store-info__badge{
  flex:none;padding:0 7px;border-radius:4px;background:rgba(255,255,255,.18);
  font-size:12px;font-weight:600;line-height:20px;color:#fff;
}
.store-info__close{
  flex:none;width:32px;height:32px;padding:0;border:0;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:#fff;cursor:pointer;
}
.store-info__close:hover{background:rgba(255,255,255,.16);}
.store-info__close:focus-visible{outline:2px solid #fff;outline-offset:-4px;}
.store-info__close svg{width:18px;height:18px;}

.store-info__body{padding:14px 16px 16px;}
.store-info__row{
  display:flex;gap:8px;margin:0 0 8px;
  font-size:14px;line-height:1.5;color:#333a42;
}
.store-info__row svg{flex:none;width:16px;height:16px;margin-top:2px;color:#5b6470;}
.store-info__tel{font-weight:700;color:var(--color-ink);white-space:nowrap;}
.store-info__tel:hover{color:var(--color-primary);text-decoration:underline;}
.store-info__row small{font-size:13px;color:#5b6470;white-space:nowrap;}
.store-info__row:last-child{margin-bottom:0;}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width:1024px){
  .store-finder{flex-direction:column;height:auto;}
  .store-finder__aside{width:100%;}
  .store-list{max-height:420px;}
  /* 세로 배치에서는 flex:1 이 0 으로 수축하므로 flex 를 풀고 높이를 준다 */
  .store-finder__map{flex:none;height:420px;}
}

@media (max-width:640px){
  .store-finder{gap:var(--sp-20);margin-bottom:60px;}
  .store-search{padding:15px;}
  .store-filter{padding:0 15px 12px;}
  .store-kind{margin:12px 15px 10px;}
  .store-filter__btn{height:30px;padding:0 11px;font-size:13px;}
  .store-item{padding:15px;}
  .store-item__name{font-size:16px;}
  .store-list{max-height:340px;}
  .store-finder__map{flex:none;height:320px;}
}