/* =====================================================
   SUNTECH sub pages — 회사소개(about.html) / 전국지점망(location.html)
   style.css 의 토큰·GNB·푸터·퀵·버튼을 그대로 쓰고, 서브 전용 레이아웃만 정의
   기준 1920, 본문 컨테이너 1120 (x400~1520), 히어로 1440 (x240~1680)
   ===================================================== */
.sub{--sub-w:1120px}
.sub-container{width:100%;max-width:calc(var(--sub-w) + var(--gutter)*2);margin:0 auto;padding-inline:var(--gutter)}
.sub-wide{width:100%;max-width:calc(1440px + var(--gutter)*2);margin:0 auto;padding-inline:var(--gutter)}

/* ---------- 서브 헤더: 흰 배경, 검정 글자, 비고정 ---------- */
.sub-head{position:relative;height:var(--gnb-h);background:#fff;z-index:20}
.sub-head .gnb{color:var(--black)}
.sub-head .gnb.is-open .gnb__panel{box-shadow:0 20px 40px rgba(0,0,0,.08)}

/* ---------- 01 페이지 타이틀 + 탭 + 히어로 ---------- */
.sub-hero{padding-top:80px}
.sub-hero__top{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding-inline:160px}
.sub-hero__label{font-size:25px;font-weight:500;color:var(--point);line-height:30px;margin-left:6px}
.sub-hero__title{font-size:75px;font-weight:600;line-height:90px;margin-top:24px;letter-spacing:-.01em}
.sub-tabs{display:flex;gap:20px;padding-bottom:18px}
.sub-tabs a{
  display:inline-flex;align-items:center;justify-content:center;width:190px;height:55px;border-radius:100px;
  border:1px solid #cecece;color:#cecece;font-size:17px;font-weight:500;transition:.3s;
}
.sub-tabs a:hover{border-color:var(--black);color:var(--black)}
.sub-tabs a.is-active{background:var(--black);border-color:var(--black);color:#fff;font-weight:800}
.sub-hero__visual{margin-top:59px}
/* 페이지 진입 모션(body.is-loaded): 라벨 → 제목 → 탭이 순차로 올라오고, 사진은 아래에서 위로 열리며 줌아웃, 캡션 띠는 사진 뒤에서 올라옴 */
.sub-hero__label,.sub-hero__title,.sub-tabs{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.is-loaded .sub-hero__label{opacity:1;transform:none}
.is-loaded .sub-hero__title{opacity:1;transform:none;transition-delay:.12s}
.is-loaded .sub-tabs{opacity:1;transform:none;transition-delay:.24s}
.sub-hero__visual{opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--ease) .35s,transform 1.2s var(--ease) .35s} /* 2026-10-20 제목 뒤에 한 박자 쉬고 */
.is-loaded .sub-hero__visual{opacity:1;transform:none}
.sub-hero__img{position:relative;height:415px;border-radius:35px 35px 0 0;overflow:hidden;background:#222}
.sub-hero__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.8s var(--ease) .15s}
.sub-hero__img::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.sub-hero__img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;pointer-events:none}
.sub-hero__img--video::after{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.45))}
.is-loaded .sub-hero__img img{transform:scale(1)}
.sub-hero__cap{
  display:flex;align-items:center;justify-content:center;height:285px;margin-top:-75px;padding-top:75px;
  background:#f6f6f6;border-radius:35px;font-size:27px;line-height:32px;text-align:center;letter-spacing:-.01em;
}
.sub-hero__cap b{font-weight:600}
.location .sub-hero__img::after{background:rgba(0,0,0,.05)}
/* 지점망 히어로(2026-10-20): 정지 사진에 아주 느린 줌·팬(켄번즈)만 얹어 영상처럼 보이게. 진입 줌아웃이 끝난 뒤 시작, 왕복 반복 */
@keyframes hero-drift{from{transform:scale(1.02) translateX(1%)}to{transform:scale(1.12) translateX(-2%)}}
.is-loaded .sub-hero__img--drift img{animation:hero-drift 28s ease-in-out 1.8s infinite alternate}
@media (prefers-reduced-motion:reduce){.sub-hero__img--drift img{animation:none}}

/* ---------- 회전 배지 (text-path) ---------- */
.badge{position:absolute;width:162px;height:162px;pointer-events:none}
.badge svg{width:100%;height:100%;animation:spin 18s linear infinite}
.badge text{font-size:15px;font-weight:500;letter-spacing:1.5px;fill:var(--point);text-transform:uppercase}
.badge i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-style:normal;font-size:25px;font-weight:500;color:var(--point);line-height:1}
@keyframes spin{to{transform:rotate(360deg)}}

/* =====================================================
   ABOUT 02 — 썬테크는 장비만 판매하지 않습니다
   ===================================================== */
.about-story{padding:180px 0 184px}
.about-story__inner{display:grid;grid-template-columns:550px 510px;justify-content:space-between;align-items:start}
.about-story__title{font-size:55px;font-weight:600;line-height:70px;letter-spacing:-.03em}
.about-story__title em{display:block;font-weight:800;color:var(--point)}
.about-story__lead{font-size:25px;line-height:32px;margin-top:24px;letter-spacing:-.03em}
.about-story__lead b{font-weight:700}
.about-story__body{font-size:23px;font-weight:300;line-height:35px;color:#878787;margin-top:58px;letter-spacing:-.03em}
.about-story__body b{font-weight:600}
/* 본문 타이포 모션: 줄 단위로 아래에서 순차 등장(0.09초 간격) → 강조 구절에 파란 형광 밑칠이 왼쪽에서 스윕 → 마지막 줄은 검정으로 진해짐 */
.about-story__body .line{display:block;overflow:hidden}
.about-story__body .line > span{display:block;transform:translateY(110%);opacity:0;transition:transform .9s var(--ease),opacity .6s var(--ease)}
.reveal-up.is-in .about-story__body .line > span{transform:none;opacity:1}
.reveal-up.is-in .about-story__body .line:nth-child(1) > span{transition-delay:.1s}
.reveal-up.is-in .about-story__body .line:nth-child(2) > span{transition-delay:.19s}
.reveal-up.is-in .about-story__body .line:nth-child(3) > span{transition-delay:.28s}
.reveal-up.is-in .about-story__body .line:nth-child(4) > span{transition-delay:.37s}
.reveal-up.is-in .about-story__body .line:nth-child(5) > span{transition-delay:.46s}
.about-story__body b{
  color:var(--black);background:linear-gradient(transparent 55%,rgba(30,86,224,.22) 55%) left center/0% 100% no-repeat;
  transition:background-size .8s var(--ease) 1.1s;
}
.reveal-up.is-in .about-story__body b{background-size:100% 100%}
.about-story__body .line:last-child > span{transition:transform .9s var(--ease),opacity .6s var(--ease),color .8s var(--ease)}
.reveal-up.is-in .about-story__body .line:last-child > span{color:var(--black);font-weight:500;transition-delay:.46s,.46s,1.4s}
.about-story__lead b{background:linear-gradient(transparent 60%,rgba(30,86,224,.18) 60%) left center/0% 100% no-repeat;transition:background-size .7s var(--ease) .5s}
.reveal-up.is-in .about-story__lead b{background-size:100% 100%}
.about-story__title em{position:relative}
.about-story__title em::after{content:"";position:absolute;left:0;bottom:6px;width:100%;height:3px;background:var(--point);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .3s}
.reveal-up.is-in .about-story__title em::after{transform:scaleX(1)}
.about-story__img{position:relative;height:435px;margin-top:12px;border-radius:20px;overflow:hidden;background:#222}
.about-story__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.about-story__img:hover img{transform:scale(1.05)}

/* =====================================================
   ABOUT 03 — 썬테크가 다른 세 가지 (bg #f2f2f2, 1000)
   ===================================================== */
.about-three{position:relative;padding:190px 0 199px;background:#f2f2f2}
.sec-title--sub{font-size:55px;font-weight:600;line-height:70px;letter-spacing:-.01em}
.sec-title--sub strong{font-weight:900}
.about-three .badge{right:calc(50% - 640px);top:269px}
.about-cards{display:grid;grid-template-columns:repeat(3,360px);justify-content:space-between;margin-top:91px}
.about-card{
  position:relative;height:450px;padding:15px;border-radius:15px;background:#fff;color:var(--black);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.about-card:hover{transform:translateY(-10px);box-shadow:0 24px 50px rgba(0,0,0,.1)}
/* 파란 카드는 고정이 아니라 호버한 카드로 옮겨감 (기본 1번, JS 가 is-active 이동) */
.about-card{transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .4s,color .4s}
.about-card.is-active,.about-card:hover{background:var(--point);color:#fff}
.about-card__img{height:230px;border-radius:10px;overflow:hidden;background:#222}
.about-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.about-card:hover .about-card__img img{transform:scale(1.06)}
.about-card__body{padding:36px 15px 0}
.about-card__title{font-size:25px;font-weight:700;line-height:30px;letter-spacing:-.03em}
.about-card__desc{font-size:17px;font-weight:300;line-height:25px;margin-top:10px;color:#878787;letter-spacing:-.03em}
.about-card__desc{transition:color .4s}
.about-card.is-active .about-card__desc,.about-card:hover .about-card__desc{color:rgba(255,255,255,.9)}

/* =====================================================
   ABOUT 04 — 썬테크가 함께하는 방식
   ===================================================== */
.about-way{padding:191px 0 197px}
.about-steps{display:grid;grid-template-columns:302px 302px 302px;justify-content:space-between;margin-top:76px}
.about-step{position:relative}
.about-step__num{font-size:60px;font-weight:900;line-height:72px;color:#efefef;letter-spacing:-.03em;transition:color .4s}
.about-step__title{font-size:25px;font-weight:700;line-height:30px;margin-top:31px;letter-spacing:-.03em}
.about-step__desc{font-size:17px;font-weight:300;line-height:25px;margin-top:10px;color:#878787;letter-spacing:-.03em}
.about-step.is-active .about-step__num,.about-step:hover .about-step__num{color:var(--point)}
.about-step + .about-step::before{content:"";position:absolute;left:-61px;top:69px;width:1px;height:120px;background:#e6e6e6}

/* =====================================================
   CONTACT US 배너 — 닫힘: 1120×270 라운드 박스 / 열림: 화면 폭 전체 + 문구 + 버튼
   스크롤 도달 또는 호버 시 열리고, 멀어지면 닫힘
   ===================================================== */
.cta{position:relative;height:270px;margin-top:0}
.cta__box{
  position:absolute;left:50%;top:0;width:var(--sub-w);height:270px;transform:translateX(-50%);
  background:var(--point);border-radius:20px;color:#fff;overflow:hidden;
  transition:width .7s var(--ease),border-radius .7s var(--ease);
}
.cta__big{
  position:absolute;left:0;right:0;top:100px;text-align:center;
  font-size:75px;font-weight:900;line-height:70px;letter-spacing:-.01em;
  transition:opacity .35s var(--ease),transform .5s var(--ease);
}
.cta__inner{
  position:absolute;left:50%;top:0;width:var(--sub-w);height:100%;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:space-between;gap:30px;
}
.cta__text{opacity:0;transform:translateX(-40px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.cta__title{font-size:50px;font-weight:700;line-height:60px;letter-spacing:-.03em}
.cta__desc{font-size:20px;line-height:24px;margin-top:19px;letter-spacing:-.03em;white-space:nowrap}
.cta__btns{display:flex;gap:20px}
.cta__btns a{
  display:inline-flex;align-items:center;justify-content:center;width:190px;height:55px;border-radius:100px;
  border:1px solid #fff;color:#fff;font-size:17px;font-weight:500;white-space:nowrap;
  opacity:0;transform:translateX(40px);
  transition:opacity .5s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s),background .3s,color .3s,border-color .3s,box-shadow .3s;
}
.cta__btns a.is-fill{background:#fff;color:var(--black);font-weight:800}
.cta__btns a:hover{background:#fff;color:var(--point);border-color:#fff;box-shadow:0 12px 26px rgba(0,0,0,.18)}
.cta.is-open .cta__btns a:hover{--d:0s;transform:translateY(-4px)}
.cta__btns a.is-fill:hover{background:var(--black);border-color:var(--black);color:#fff}
.cta.is-open .cta__box{width:100%;border-radius:0}
.cta.is-open .cta__big{opacity:0;transform:translateY(-30px) scale(.9)}
.cta.is-open .cta__text{opacity:1;transform:none;transition-delay:.3s}
.cta.is-open .cta__btns a{opacity:1;transform:none}
.cta.is-open .cta__btns a:nth-child(1){--d:.35s}
.cta.is-open .cta__btns a:nth-child(2){--d:.45s}
.cta.is-open .cta__btns a:nth-child(3){--d:.55s}
.cta__glow{position:absolute;right:-160px;top:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,0) 65%);opacity:0;transition:opacity .8s;pointer-events:none}
.cta.is-open .cta__glow{opacity:1}

/* 서브 푸터 */
.sub .footer{height:auto;padding:66px 0 60px}

/* =====================================================
   LOCATION 02 — 지도 + 지점 목록
   ===================================================== */
.loc-map{position:relative;padding:264px 0 190px}
.loc-map__inner{display:grid;grid-template-columns:500px 550px;justify-content:space-between;align-items:start}
.loc-map__map{position:relative;width:440px;margin-left:-10px}
.loc-map__map img{width:100%;height:auto}
.loc-map__info{padding-top:0}
.loc-map__title{font-size:55px;font-weight:800;line-height:65px;letter-spacing:-.03em}
.loc-map__title em{display:block;color:var(--point)}
.loc-map__desc{font-size:20px;line-height:35px;color:var(--gray);margin-top:23px;letter-spacing:-.03em}
.loc-list{margin-top:61px}
.loc-list li{position:relative;border-top:1px solid var(--gray-line)}
.loc-list a{
  position:relative;z-index:0;display:grid;grid-template-columns:1fr auto 23px;align-items:center;gap:20px;
  padding:12px 30px 11px 20px;height:69px;color:var(--gray);transition:color .3s,padding .3s var(--ease);
}
.loc-list a::before{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);z-index:-1;box-shadow:0 6px 18px rgba(0,0,0,.05)}
.loc-list a::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--point);transform:scaleY(0);transition:transform .3s var(--ease) .1s}
.loc-list b{font-size:20px;font-weight:800;line-height:45px;color:var(--black);letter-spacing:-.03em}
.loc-list span{font-size:17px;line-height:20px;color:#878787;margin-right:28px}
.loc-list .circle-arrow{color:var(--gray)}
.loc-list .circle-arrow::before{transform:rotate(45deg);transition:transform .35s var(--ease)}
.loc-list li.is-active a{color:#666;padding-left:30px}
.loc-list li.is-active a::before{transform:scaleX(1)}
.loc-list li.is-active a::after{transform:scaleY(1)}
.loc-list li.is-active b{color:var(--point)}
.loc-list li.is-active .circle-arrow{background:var(--point);border-color:var(--point);color:#fff}
.loc-list li.is-active .circle-arrow::before{transform:rotate(0)}
.loc-map .badge{right:calc(50% - 744px);bottom:76px;width:229px;height:229px;z-index:2}
.loc-map .badge text{font-size:16px}

/* =====================================================
   LOCATION 03 — 지점 안내 카드
   ===================================================== */
.loc-branches{position:relative;padding:180px 0 190px}
.loc-branches::before{content:"";position:absolute;left:0;right:0;top:0;height:449px;background:#f1f1f1;z-index:-1}
.loc-branches{z-index:0}
.loc-branches .sec-title--sub{font-weight:900}
.loc-cards{display:grid;grid-template-columns:repeat(3,360px);justify-content:space-between;gap:40px 0;margin-top:90px}
.loc-card{
  position:relative;display:block;height:410px;border:1px solid #ebebeb;border-radius:10px;background:#fff;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s;
}
.loc-card:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(0,0,0,.08);border-color:transparent}
.loc-card__img{height:220px;overflow:hidden;background:#222}
/* 지점 사진 대안: 지도 썸네일 + 해당 지점 핀 (사진 확보 시 .loc-card__img 로 교체) */
.loc-card__map{position:relative;background:linear-gradient(160deg,#eef3ff,#f7f9fc);display:flex;align-items:center;justify-content:center}
.loc-card__mapbox{position:relative;width:163px;height:196px}
.loc-card__map img{width:100%;height:100%;object-fit:contain;opacity:.9;transform:none!important;display:block}
.loc-card__map .pin{width:14px;height:14px;margin:-7px 0 0 -7px}
.loc-card__map .pin::before,.loc-card__map .pin::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(30,86,224,.16);opacity:0;animation:pulse 2.2s ease-out infinite}
.loc-card__map .pin::after{animation-delay:1.1s}
.loc-card__map em{position:absolute;left:18px;top:16px;font-style:normal;font-size:13px;font-weight:700;letter-spacing:.5px;color:var(--point);padding:5px 12px;border-radius:100px;background:#fff;box-shadow:0 2px 8px rgba(30,86,224,.12)}
.loc-card:hover .loc-card__map .pin{transform:scale(1.3)}
.loc-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.loc-card:hover .loc-card__img img{transform:scale(1.06)}
.loc-card__body{padding:26px 30px 0}
.loc-card__name{font-size:20px;font-weight:700;line-height:25px;letter-spacing:-.03em}
.loc-card__dl{display:grid;grid-template-columns:35px 1fr;gap:5px 10px;margin:14px 0 0 8px;font-size:15px;line-height:18px}
.loc-card__dl dt{font-weight:600;color:#878787;letter-spacing:1.05px}
.loc-card__dl dd{color:var(--gray);white-space:nowrap}
.loc-card .circle-arrow{position:absolute;right:30px;bottom:30px;width:50px;height:50px;border-width:1px;color:var(--gray);transition:background .3s,color .3s,border-color .3s}
.loc-card .circle-arrow::before{transform:rotate(45deg);transition:transform .35s var(--ease)}
.loc-card:hover .circle-arrow{background:var(--point);border-color:var(--point);color:#fff}
.loc-card:hover .circle-arrow::before{transform:rotate(0)}

/* =====================================================
   LOCATION 04 — 본사 오시는 길 (bg #f8f8f8, 990)
   ===================================================== */
.loc-visit{padding:192px 0 199px;background:var(--bg-soft)}
.loc-visit .sec-title--sub{font-weight:700}
.loc-visit__inner{display:grid;grid-template-columns:605px 455px;justify-content:space-between;align-items:start;margin-top:92px}
.loc-visit__map{position:relative;display:block;height:441px;border-radius:10px;overflow:hidden;background:#ddd}
.loc-visit__map img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.loc-visit__map:hover img{transform:scale(1.04)}
/* 2026-10-21 피드백 4: 네이버 정적 지도 → 구글 지도 임베드(iframe). 우하단 버튼은 새 창으로 구글 지도 열기 */
.loc-visit__map iframe{display:block;width:100%;height:100%;border:0}
.loc-visit__map span{
  position:absolute;right:20px;bottom:20px;padding:0 18px;height:40px;display:inline-flex;align-items:center;gap:8px;
  background:#fff;border-radius:100px;font-size:14px;font-weight:600;color:var(--black);box-shadow:0 4px 14px rgba(0,0,0,.12);
  transition:background .3s,color .3s,transform .3s var(--ease);
}
.loc-visit__map a:hover span{background:var(--point);color:#fff;transform:translateY(-2px)} /* 2026-10-23 구글 지도 버튼 파란 호버 */
.loc-info{border-top:1px solid var(--gray-line)}
.loc-info > div{padding:26px 20px 25px;border-bottom:1px solid var(--gray-line);min-height:105px}
.loc-info dt{font-size:17px;font-weight:800;color:var(--point);letter-spacing:1.19px;line-height:20px}
.loc-info dd{font-size:20px;line-height:24px;color:var(--gray);margin-top:8px;letter-spacing:-.03em}
.loc-info dd small{display:block;font-size:15px;font-weight:300;line-height:18px;margin-top:2px}

/* =====================================================
   PRODUCT 공통 — 브레드크럼 + 타이틀 + 모델 탭
   ===================================================== */
.prod-head{padding-top:48px}
.crumb{display:flex;align-items:center;gap:26px;font-size:17px;font-weight:700;color:#c3c3c3}
.crumb img{width:32px;height:32px}
.crumb li{position:relative}
.crumb li + li::before{content:"";position:absolute;left:-16px;top:50%;width:4px;height:4px;border-right:1px solid #9c9c9c;border-top:1px solid #9c9c9c;transform:translateY(-50%) rotate(45deg)}
.crumb li:last-child{color:var(--black)}
.prod-head__row{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-top:11px}
.prod-head__title{font-size:75px;font-weight:700;line-height:90px;letter-spacing:-.01em;white-space:nowrap;flex-shrink:0}
.prod-head__sub{font-size:30px;color:#878787;line-height:36px;margin-top:35px;letter-spacing:-.01em}
.model-tabs{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0;margin-bottom:18px}
.model-tabs a{
  position:relative;display:block;padding:0 11px 8px;font-size:19px;line-height:30px;color:#cdcdcd;white-space:nowrap;transition:color .3s;
}
.model-tabs a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--point);transform:scaleX(0);transition:transform .3s var(--ease)}
.model-tabs a:hover{color:var(--black)}
.model-tabs a.is-active{color:var(--point);font-weight:800}
.model-tabs a.is-active::after{transform:scaleX(1)}

/* ---------- 02 제품 요약 ---------- */
.prod-intro{padding:83px 0 200px}
.prod-intro__inner{display:grid;grid-template-columns:474px 583px;justify-content:space-between;align-items:start}
.prod-intro__img{position:relative;height:510px;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--gray-line)}
.prod-intro__img img{width:100%;height:100%;object-fit:contain;padding:24px;transition:transform 1s var(--ease)}
.prod-intro__img:hover img{transform:scale(1.04)}
.prod-intro__body{padding-top:18px;padding-left:20px}
.prod-tag{display:inline-flex;align-items:center;height:40px;padding:2px 20px 0 21px;border-radius:5px;background:#edf2ff;font-size:17px;letter-spacing:-.03em}
.prod-intro__name{font-size:50px;font-weight:800;line-height:70px;margin-top:33px;letter-spacing:-.03em;white-space:nowrap}
.prod-intro__desc{font-size:20px;line-height:30px;color:#878787;margin-top:18px;letter-spacing:-.03em}
.prod-stats{display:grid;grid-template-columns:repeat(3,141px);gap:0 46px;margin:34px 0 0 -2px;padding-top:34px;border-top:1px solid var(--gray-line);width:570px;margin-left:-20px;padding-left:18px}
.prod-stats b{display:block;font-size:30px;font-weight:800;line-height:36px;letter-spacing:-.03em;white-space:nowrap}
.prod-stats span{display:block;font-size:17px;font-weight:300;line-height:20px;color:#878787;margin-top:10px;letter-spacing:-.03em}
.prod-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:58px;margin-left:-5px} /* 2026-10-21 피드백 6: 상담문의 · 카탈로그 · 온라인매뉴얼 3개 */
.prod-btns a{
  display:inline-flex;align-items:center;justify-content:center;min-width:170px;padding:0 30px;height:60px;border-radius:100px;
  border:1px solid #ccc;color:#cecece;font-size:23px;font-weight:500;transition:.3s;
}
/* 2026-10-23: 카탈로그·온라인매뉴얼(아웃라인)에도 상담 문의와 같은 파란 호버 + 살짝 상승 */
.prod-btns a:hover{border-color:var(--point);color:var(--point);transform:translateY(-2px)}
.prod-btns a.is-fill{background:var(--dark);border-color:var(--dark);color:#fff;font-weight:800}
.prod-btns a.is-fill:hover{background:var(--point);border-color:var(--point);color:#fff}

/* ---------- 03 특징 / 이렇게 고르세요 (2×2) ---------- */
.feat{padding:196px 0 200px;background:var(--bg-soft)}
.feat .sec-title--sub{font-weight:700;margin-top:22px}
/* 2026-10-21: 사진 카드형으로 바꿨다가 사용자 요청으로 미팅 전 레이아웃(텍스트 2×2)으로 되돌림 */
.feat-grid{display:grid;grid-template-columns:550px 550px;justify-content:space-between;margin-top:93px}
.feat-item{position:relative;min-height:192px;padding:51px 25px 0 110px;border-top:1px solid var(--gray-line);color:var(--gray);transition:color .3s}
.feat-item:nth-child(n+3){border-bottom:1px solid var(--gray-line)}
.feat-item__num{
  position:absolute;left:25px;top:71px;display:grid;place-items:center;width:50px;height:50px;border-radius:5px;background:#dcdcdc;
  color:#fff;font-size:20px;font-weight:800;letter-spacing:-.03em;transition:background .3s,transform .3s var(--ease);
}
.feat-item__title{font-size:25px;font-weight:800;line-height:30px;letter-spacing:-.03em}
.feat-item__desc{font-size:17px;font-weight:300;line-height:25px;margin-top:10px;letter-spacing:-.03em;color:var(--gray)}
.feat-item.is-active{color:var(--black)}
.feat-item.is-active .feat-item__num{background:var(--point);transform:translateY(-3px)}

/* ---------- 03-b 특징: 상세페이지형 (2026-10-23 확정, product.html) ----------
   도입 문장 → 01 풀폭 사진 → 02·03·04 글·사진 반반 교차(마지막은 숫자 콜아웃 포함) → 결과물 갤러리. 사진 없으면 "사진 준비 중" 점선 박스 */
.feat--pf{padding:0 0 60px;background:#fff}
.pf__lead{text-align:center;padding:140px 0 60px}
.pf__lead .sec-label{justify-content:center}
.pf__lead h2{font-size:60px;font-weight:800;line-height:80px;letter-spacing:-.04em;margin-top:24px}
.pf__lead h2 em{font-style:normal;color:var(--point)}
.pf__lead .pf__sub{font-size:20px;color:#777;margin-top:22px;line-height:1.6}
.pf__block{padding:110px 0}
.pf__block + .pf__block{border-top:1px solid var(--gray-line)}
.pf__kicker{font-size:15px;font-weight:700;letter-spacing:2px;color:var(--point)}
.pf__kicker i{display:inline-block;width:34px;height:34px;line-height:34px;text-align:center;border-radius:5px;background:var(--point);color:#fff;font-style:normal;font-size:15px;margin-right:12px;letter-spacing:0}
.pf__title{font-size:44px;font-weight:800;line-height:60px;letter-spacing:-.03em;margin-top:22px;color:var(--black)}
.pf__desc{font-size:19px;line-height:32px;color:#666;margin-top:20px;letter-spacing:-.02em}
.pf__desc br{display:none}
.pf__full .pf__img{height:620px}
.pf__full .pf__txt{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:60px;align-items:start;margin-top:56px}
.pf__full .pf__desc{margin-top:8px}
.pf__half{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}
.pf__half .pf__img{height:520px}
.pf__half.is-rev .pf__img{order:-1}
.pf__img{position:relative;border-radius:24px;overflow:hidden;background:#eef0f3}
.pf__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pf__img:hover img{transform:scale(1.04)}
.pf__img.is-empty{display:grid;place-items:center;border:2px dashed #d3d8e0;background:#f7f8fa;color:#8a93a3;text-align:center;padding:30px}
.pf__img.is-empty b{display:block;font-size:14px;letter-spacing:1px;color:#6b7482}
.pf__img.is-empty span{display:block;font-size:14px;line-height:1.6;margin-top:8px}
.pf__img.is-empty i{display:block;width:48px;height:48px;margin:0 auto 14px;border-radius:12px;background:#e3e7ee}
.pf__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.pf__stats li{padding:22px 18px;border-radius:16px;background:#f6f7f9;border:1px solid var(--gray-line)}
.pf__stats b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.1;white-space:nowrap;color:var(--black)}
.pf__stats span{display:block;font-size:13px;color:#888;margin-top:10px;line-height:1.4}
.pf__gal ul{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.pf__gal li{aspect-ratio:1;border-radius:16px;overflow:hidden;background:#eef0f3}
.pf__gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pf__gal li:hover img{transform:scale(1.06)}
.pf__gal .pf__title{font-size:36px;line-height:48px}
@media (max-width:1280px){ .pf__lead h2{font-size:48px;line-height:1.3} .pf__title{font-size:36px;line-height:1.3} .pf__half{gap:40px} .pf__full .pf__txt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px} }
@media (max-width:1024px){
  .pf__lead{padding:90px 0 30px} .pf__lead h2{font-size:38px} .pf__title{font-size:30px;line-height:1.35} .pf__block{padding:70px 0}
  .pf__full .pf__img{height:auto;aspect-ratio:16/9} .pf__full .pf__txt{grid-template-columns:1fr;gap:16px;margin-top:32px}
  .pf__half{grid-template-columns:1fr;gap:28px} .pf__half .pf__img{height:auto;aspect-ratio:4/3} .pf__half.is-rev .pf__img{order:0}
  .pf__stats{grid-template-columns:1fr;gap:10px} .pf__gal ul{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){ .pf__lead h2{font-size:30px} .pf__title{font-size:26px} .pf__desc{font-size:16px;line-height:1.7} .pf__gal .pf__title{font-size:26px;line-height:1.3} }

/* ---------- 04 제품 사양 표 ---------- */
.spec{padding:185px 0 110px}
.spec__head{display:flex;align-items:flex-end;gap:30px}
.spec__head .sec-title--sub{font-weight:700;margin-top:22px}
.spec__note{font-size:17px;color:var(--gray);line-height:20px;padding-bottom:6px;letter-spacing:-.03em}
.spec-table{width:100%;border-collapse:collapse;margin-top:64px;border-top:1px solid var(--black)}
.spec-table th,.spec-table td{height:81px;border-bottom:1px solid var(--gray-line);text-align:left;vertical-align:middle}
.spec-table th{width:285px;padding-left:60px;background:var(--bg-soft);font-size:23px;font-weight:700;letter-spacing:1.15px;color:var(--black)}
.spec-table td{padding-left:75px;font-size:20px;font-weight:300;line-height:27px;color:var(--gray);letter-spacing:-.03em}
.spec-table tr{transition:background .25s}
.spec-table tr:hover td{color:var(--black)}
/* 하위 모델이 있는 제품(Apache UV·Sirius UV): 열 머리글 + 모델별 값 */
.spec-table--multi{table-layout:fixed}
.spec-table--multi thead th{height:64px;padding-left:0;background:#fff;border-bottom:1px solid var(--black);font-size:19px;font-weight:800;color:var(--black);text-align:center;letter-spacing:0}
.spec-table--multi thead th:first-child{width:200px;text-align:left;padding-left:40px;background:#fff}
.spec-table--multi tbody th{width:200px;padding-left:40px;font-size:19px;letter-spacing:0}
.spec-table--multi td{padding:16px 18px;height:auto;min-height:64px;font-size:16px;line-height:24px;text-align:center}
.spec-table--multi td[colspan]{text-align:left;padding-left:40px}

/* ---------- 모델 비교표 ---------- */
.compare{padding:91px 0 200px}
.cmp-table{width:100%;border-collapse:collapse;margin-top:54px;border-top:1px solid var(--black);table-layout:fixed}
.cmp-table th,.cmp-table td{height:64px;padding:14px 12px;border-bottom:1px solid var(--gray-line);text-align:center;vertical-align:middle;font-size:15px;line-height:22px;letter-spacing:-.03em;word-break:keep-all;transition:background .25s,color .25s}
.cmp-table thead th{height:72px;padding:0 12px;background:var(--bg-soft);font-size:19px;font-weight:700;color:var(--black);border-bottom:1px solid #dcdcdc;white-space:nowrap}
.cmp-table thead th:first-child{text-align:left;padding-left:24px;font-size:16px;letter-spacing:1px}
.cmp-table tbody th{text-align:left;padding-left:24px;font-weight:700;color:var(--black);white-space:nowrap}
.cmp-table tbody td{color:#575757;font-weight:400}
.cmp-table col.is-on{background:rgba(30,86,224,.05)}
.cmp-table .is-on{background:rgba(30,86,224,.05)}
.cmp-table thead th.is-on{color:var(--point)}
.cmp-table tbody td.is-on{color:var(--black);font-weight:600}
/* 열 폭: 항목 120 + 모델 5열 1000 (Apache UV 는 하위 모델이 많아 넓게) */
.cmp-table col:nth-child(1){width:120px}
.cmp-table col:nth-child(2){width:185px}
.cmp-table col:nth-child(3){width:245px}
.cmp-table col:nth-child(4){width:200px}
.cmp-table col:nth-child(5){width:200px}
.cmp-table col:nth-child(6){width:170px}.cmp-table thead a{color:inherit}

/* =====================================================
   REFERENCE — 활용 영상(시안 1-588) / 출력샘플 갤러리(전달 HTML 구조)
   ===================================================== */
.ref-list{padding:74px 0 100px}
.filter{display:flex;flex-wrap:wrap;gap:15px}
.filter button{
  display:inline-flex;align-items:center;justify-content:center;height:45px;padding:0 28px;border-radius:100px;
  border:1px solid #ccc;color:#cecece;font-size:17px;font-weight:500;background:#fff;transition:.25s;white-space:nowrap;
}
.filter button em{font-style:normal;font-size:13px;margin-left:6px;opacity:.7}
.filter button:hover{border-color:var(--black);color:var(--black)}
.filter button.is-on{background:var(--dark);border-color:var(--dark);color:#fff;font-weight:800;letter-spacing:1.7px;padding:0 34px}
.filter button.is-on em{letter-spacing:0}
.ref-cnt{margin-top:40px;font-size:15px;color:var(--gray);letter-spacing:-.03em}
.ref-cnt b{color:var(--black)}

/* 영상 카드 */
.vgrid{display:grid;grid-template-columns:repeat(3,360px);justify-content:space-between;gap:62px 20px;margin-top:95px}
.ref-cnt + .vgrid,.ref-cnt + .ggrid{margin-top:28px}
.vcard{display:block;color:var(--black)}
.vcard__thumb{position:relative;height:205px;border-radius:20px;overflow:hidden;background:#222}
.vcard__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.vcard__thumb::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5);transition:background .3s}
.vcard:hover .vcard__thumb img{transform:scale(1.06)}
.vcard:hover .vcard__thumb::after{background:rgba(0,0,0,.3)}
/* 재생 버튼: 흐릿한 원 + 흰 삼각형 (시안 Group 410, 기본 #333 · 호버 #3C6EEA) */
.vcard__play{position:absolute;left:50%;top:50%;z-index:1;width:65px;height:65px;margin:-32px 0 0 -32px}
.vcard__play::before{content:"";position:absolute;inset:0;border-radius:50%;background:#333;filter:blur(7px);transition:background .3s,transform .3s var(--ease)}
.vcard__play::after{
  content:"";position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-40%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;
}
.vcard:hover .vcard__play::before{background:#3c6eea;transform:scale(1.1)}
.vcard__body{padding:32px 15px 0}
.vcard__head{display:flex;align-items:baseline;gap:18px}
.vcard__title{font-size:20px;font-weight:700;line-height:25px;letter-spacing:-.03em}
.vcard__cat{font-size:13px;color:var(--point);white-space:nowrap;transition:text-decoration .2s}
.vcard:hover .vcard__cat{text-decoration:underline}
.vcard__desc{font-size:15px;line-height:25px;color:var(--gray);margin-top:7px;letter-spacing:-.03em}
.vcard__date{font-size:13px;font-weight:300;line-height:25px;color:#cbcbcb;margin:12px 0 0 2px;letter-spacing:-.03em}

/* 갤러리 카드 (전달 HTML .gitem 구조) */
.ggrid{display:grid;grid-template-columns:repeat(3,360px);justify-content:space-between;gap:20px;margin-top:95px}
.gcard{position:relative;display:block;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#eee}
.gcard img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gcard:hover img{transform:scale(1.06)}
.gcard__badge{
  position:absolute;left:14px;top:14px;z-index:2;padding:5px 12px;border-radius:100px;
  background:rgba(51,51,51,.82);color:#fff;font-size:12px;font-weight:700;backdrop-filter:blur(4px);
}
.gcard__ov{
  position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.05) 62%);opacity:0;transition:opacity .3s;
}
.gcard:hover .gcard__ov,.gcard:focus-visible .gcard__ov{opacity:1}
.gcard__ov b{font-size:17px;font-weight:700;letter-spacing:-.03em}
.gcard__ov span{margin-top:6px;font-size:13px;color:#cfd6e0}
.ref-item[hidden]{display:none}

/* 더 보기 (시안 Group 412: 250×60 아웃라인) */
.more-wrap{display:flex;justify-content:center;margin-top:62px}
.btn-more-outline{
  display:inline-flex;align-items:center;gap:10px;width:250px;height:60px;justify-content:center;border-radius:100px;
  border:1px solid var(--black);font-size:23px;font-weight:700;color:var(--black);transition:.3s;
}
.btn-more-outline i{font-style:normal;font-size:12px;transition:transform .3s}
.btn-more-outline em{font-style:normal;font-size:15px;font-weight:400;color:#cecece;margin-left:6px}
.btn-more-outline:hover{background:var(--black);color:#fff}
.btn-more-outline:hover em{color:#aaa}
.btn-more-outline[disabled]{opacity:.35;pointer-events:none}
.ref-list .cta{margin-top:100px}

/* =====================================================
   지원·교육 / 고객센터 공통
   ===================================================== */
.prod-head__sub--sm{font-size:20px;line-height:30px;margin-top:33px}
.sec-title--sub.is-sm{font-size:55px;line-height:66px;font-weight:700}
.sec-desc{font-size:20px;line-height:30px;color:#878787;margin-top:26px;letter-spacing:-.03em}

/* 단계 (PROCESS): 번호 + 2px 라인 + 끝 30° 눈금 */
.psteps{display:grid;justify-content:space-between;margin-top:100px}
.psteps--3{grid-template-columns:repeat(3,360px)}
.psteps--4{grid-template-columns:repeat(4,260px)}
.pstep{position:relative;color:var(--black);transition:color .3s}
.pstep__num{position:relative;display:block;padding-bottom:12px;font-size:25px;font-weight:800;line-height:30px;letter-spacing:-.01em;border-bottom:2px solid currentColor}
.pstep__num::after{content:"";position:absolute;right:-1px;bottom:-2px;width:26px;height:2px;background:currentColor;transform-origin:right bottom;transform:rotate(-30deg)}
.pstep__title{font-size:25px;font-weight:700;line-height:32px;margin-top:30px;letter-spacing:-.03em}
.pstep__desc{font-size:17px;font-weight:300;line-height:25px;margin-top:10px;color:#878787;letter-spacing:-.03em}
.pstep.is-active{color:var(--point)}
.pstep.is-active .pstep__title{color:var(--black)}
.psteps--dim .pstep:not(.is-active){color:#d3d3d3}
.psteps--dim .pstep:not(.is-active) .pstep__title{color:#d3d3d3}
.psteps--dim .pstep:not(.is-active) .pstep__desc{color:#d3d3d3}
.psteps--dim .pstep{transition:color .3s}

/* 화살표 텍스트 링크 (문의 게시판 이용하기 →) */
.tlink{display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:500;color:var(--point);white-space:nowrap}
.tlink::after{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--arrow-icon) center/100% no-repeat;mask:var(--arrow-icon) center/100% no-repeat;transform:rotate(45deg);transition:transform .3s var(--ease)}
.tlink:hover::after{transform:rotate(45deg) translate(3px,-3px)}

/* =====================================================
   EDU — 고객교육센터 (시안 1-2116)
   ===================================================== */
.edu-intro{padding:102px 0 184px}
.edu-cards{display:grid;grid-template-columns:repeat(3,360px);justify-content:space-between;margin-top:96px}
/* 2026-10-20: 카드 띄우기·파란 글로우 그림자 제거. 회사소개 "다른 세 가지" 카드와 같은 규칙 — 활성 카드만 포인트색으로 채워지고(호버한 카드로 이동) 나머지는 흰 카드 그대로 */
.edu-card{
  position:relative;height:350px;padding:44px 30px 0;border:1px solid #e7e7e7;border-radius:20px;background:#fff;color:var(--black);
  transition:background .4s,border-color .4s,color .4s;
}
.edu-card__num{display:block;font-size:17px;font-weight:700;line-height:20px;color:var(--gray);letter-spacing:-.01em;transition:color .4s}
.edu-card__title{font-size:25px;font-weight:700;line-height:32px;margin-top:35px;letter-spacing:-.03em}
.edu-card__desc{font-size:17px;font-weight:300;line-height:25px;margin-top:12px;color:#878787;letter-spacing:-.03em;transition:color .4s}
.edu-card__list{margin-top:26px}
.edu-card__list li{position:relative;padding-left:11px;font-size:15px;font-weight:300;line-height:20px;color:var(--gray);letter-spacing:-.03em;margin-top:6px;transition:color .4s}
.edu-card__list li::before{content:"·";position:absolute;left:0;top:0;font-weight:700}
.edu-card.is-active{background:var(--point);border-color:var(--point);color:#fff}
.edu-card.is-active .edu-card__num{color:rgba(255,255,255,.7)}
.edu-card.is-active .edu-card__desc{color:rgba(255,255,255,.9)}
.edu-card.is-active .edu-card__list li{color:rgba(255,255,255,.8)}

.edu-class{padding:212px 0 190px;background:var(--bg-soft)}
.edu-photos{display:grid;grid-template-columns:repeat(3,360px);justify-content:space-between;gap:20px;margin-top:60px}
.edu-photos li{height:250px;border-radius:20px;overflow:hidden;background:#222}
.edu-photos img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.edu-photos li:hover img{transform:scale(1.06)}
.edu-class .sec-title--sub + .edu-photos{margin-top:60px}
/* 강의 영상: 어두운 띠 섹션(흰 → 회색 → 검정 → 흰 리듬). 카드 호버 시 썸네일 확대·제목 파란색, 진입 시 카드 순차 등장 */
.edu-videos{position:relative;padding:140px 0 150px;background:#fff;color:var(--black);overflow:hidden}
.edu-videos__head{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.edu-videos__btn{width:auto;height:52px;padding:0 26px;font-size:17px;gap:8px;margin-bottom:6px}
.edu-videos__btn i{font-size:16px;transition:transform .3s var(--ease)}
.edu-videos__btn:hover{background:var(--black);color:#fff}
.edu-videos__btn:hover i{transform:translate(2px,-2px)}
.edu-videos .vgrid{position:relative;z-index:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:60px}
.edu-videos .vcard{color:var(--black);opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.edu-videos .vgrid.is-in .vcard{opacity:1;transform:none}
.edu-videos .vgrid.is-in .vcard:nth-child(2){transition-delay:.12s}
.edu-videos .vgrid.is-in .vcard:nth-child(3){transition-delay:.24s}
/* 2026-10-20: 썸네일 띄우기·그림자 제거. 레퍼런스 페이지 영상 카드와 같은 호버(사진 줌 + 어둡기 완화 + 재생 버튼 파란색)만 */
.edu-videos .vcard__thumb{height:auto;aspect-ratio:16/9;border-radius:14px;background:#111}
.edu-videos .vcard__thumb::after{background:rgba(0,0,0,.3)}
.edu-videos .vcard:hover .vcard__thumb::after{background:rgba(0,0,0,.12)}
.edu-vcard__dur{position:absolute;right:12px;bottom:12px;z-index:1;padding:4px 9px;border-radius:6px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;font-weight:600;letter-spacing:.5px}
.edu-videos .vcard__body{padding:22px 6px 0}
.edu-videos .vcard__title{font-size:19px;transition:color .3s}
.edu-videos .vcard:hover .vcard__title{color:var(--point)}
.edu-videos .vcard__desc{font-size:15px;line-height:24px}
/* 교육 신청: 회색 배경으로 영상 섹션과 구분, 상하 여백 축소 */
.edu-process{padding:120px 0 0;background:var(--bg-soft)}
.edu-process .psteps{margin-top:70px}

.edu-process{text-align:center}
.edu-process .psteps{text-align:left}
.edu-page .cta{margin-top:120px}

/* =====================================================
   DATA — 자료실 (시안 1-1852)
   ===================================================== */
.data-list{padding:99px 0 100px}
.data-list .filter{margin-top:52px}
.dl-table{width:100%;border-collapse:collapse;margin-top:37px;border-top:1px solid var(--black);table-layout:fixed}
.dl-table th,.dl-table td{text-align:left;vertical-align:middle;border-bottom:1px solid var(--gray-line)}
.dl-table thead th{height:81px;padding-left:44px;background:var(--bg-soft);font-size:20px;font-weight:700;color:var(--black);letter-spacing:-.01em}
.dl-table tbody td{height:95px;padding-left:44px;font-size:15px;color:var(--black);letter-spacing:-.03em;transition:background .25s}
.dl-table col:nth-child(1){width:285px}
.dl-table col:nth-child(2){width:410px}
.dl-table col:nth-child(3){width:255px}
.dl-table col:nth-child(4){width:170px}
.dl-table th:last-child,.dl-table td:last-child{text-align:center;padding-left:0}
.dl-table tbody td:nth-child(3){color:#878787;font-weight:300}
.dl-table tbody tr:hover td{background:#fbfcff}
.dl-table tbody tr:hover td:nth-child(2){font-weight:600}
.dl-pill{display:inline-flex;align-items:center;justify-content:center;height:33px;min-width:100px;padding:0 15px;border-radius:100px;background:rgba(30,86,224,.05);font-size:13px;font-weight:700;color:var(--black);letter-spacing:-.03em}
.dl-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;transition:background .3s}
.dl-btn img{width:25px;height:25px;transition:transform .3s var(--ease)}
.dl-btn:hover{background:rgba(30,86,224,.08)}
.dl-btn:hover img{transform:translateY(3px)}
.dl-empty{display:none;padding:60px 0;text-align:center;font-size:17px;color:var(--gray)}
.ref-list.is-empty .dl-empty{display:block}
.dl-note{margin-top:18px;font-size:14px;color:var(--gray);letter-spacing:-.03em}
/* 다운로드 비밀번호 모달 */
.pw-bd{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.45);animation:pw-fade .25s var(--ease)}
@keyframes pw-fade{from{opacity:0}to{opacity:1}}
.pw-modal{width:420px;max-width:100%;padding:36px 34px 30px;border-radius:10px;background:#fff;box-shadow:0 30px 60px rgba(0,0,0,.2);animation:pw-up .3s var(--ease)}
@keyframes pw-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pw-modal h3{font-size:22px;font-weight:800;letter-spacing:-.03em}
.pw-modal__file{margin-top:8px;font-size:14px;color:#878787;letter-spacing:-.03em}
.pw-modal__file b{color:var(--point);font-weight:700}
.pw-modal .fi{margin-top:20px;height:48px;font-size:16px;letter-spacing:.2em}
.pw-modal .fi::placeholder{letter-spacing:0}
.pw-modal__msg{margin-top:10px;font-size:13px;line-height:20px;color:var(--gray);letter-spacing:-.03em}
.pw-modal__msg.is-ok{color:var(--point);font-weight:600}
.pw-modal__msg.is-err{color:#e0483a}
.pw-modal__acts{display:flex;gap:10px;margin-top:22px}
.pw-modal__acts .btn-line,.pw-modal__acts .btn-submit{flex:1;width:auto;height:50px;font-size:16px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* =====================================================
   REMOTE — 원격지원 (시안 1-1576)
   ===================================================== */
.remote-steps{padding:105px 0 0}
.remote-grid{display:grid;grid-template-columns:360px 360px 360px;grid-template-rows:220px 220px;gap:20px;justify-content:space-between;margin-top:63px}
.remote-card{
  padding:35px 30px 0;border:1px solid #e7e7e7;border-radius:10px;background:#fff;color:var(--black);
  transition:border-color .3s,box-shadow .5s var(--ease),transform .5s var(--ease);
}
.remote-card__num{display:block;font-size:17px;font-weight:700;line-height:20px;color:var(--point);letter-spacing:-.01em}
.remote-card__title{font-size:20px;font-weight:700;line-height:27px;margin-top:22px;letter-spacing:-.03em}
.remote-card__desc{font-size:15px;font-weight:300;line-height:23px;margin-top:10px;color:#878787;letter-spacing:-.03em}
.remote-card:hover{border-color:var(--point);box-shadow:0 20px 40px rgba(30,86,224,.08);transform:translateY(-4px)}
.remote-program{
  grid-column:3;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:0 40px;border-radius:10px;background:var(--bg-soft);
}
.remote-program__title{font-size:20px;font-weight:700;line-height:27px;letter-spacing:-.03em}
.remote-program__desc{font-size:15px;font-weight:300;line-height:25px;color:#878787;margin-top:11px;letter-spacing:-.03em}
.remote-program__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;width:280px;height:60px;margin-top:33px;border-radius:5px;
  background:var(--point);color:#fff;font-size:20px;font-weight:700;letter-spacing:-.01em;transition:background .3s,transform .3s var(--ease);
}
.remote-program__btn img{width:22px;height:22px;filter:brightness(0) invert(1)}
.remote-program__btn:hover{background:#1747bf;transform:translateY(-2px)}
.remote-program__os{font-size:13px;color:var(--gray);margin-top:14px;letter-spacing:-.03em}
/* 2026-10-21 피드백 9: 관리자용 히든 버튼 (기본 hidden, ?admin 또는 제목 5연타로 표시) */
.remote-program__btn--admin{margin-top:14px;background:var(--dark);font-size:16px;height:50px}
.remote-program__btn--admin:hover{background:var(--point)} /* 관리자용도 같은 파란 호버 */
.remote-program__btn--admin[hidden]{display:none}

.remote-banners{display:grid;grid-template-columns:550px 550px;justify-content:space-between;margin-top:71px}
.remote-banner{position:relative;display:block;height:210px;border-radius:10px;overflow:hidden;background:#222;color:#fff}
.remote-banner img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.remote-banner::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.35));transition:background .3s}
.remote-banner:hover img{transform:scale(1.05)}
.remote-banner__body{position:absolute;left:40px;top:44px;z-index:2}
.remote-banner__title{font-size:25px;font-weight:700;line-height:32px;letter-spacing:-.03em}
.remote-banner__desc{font-size:15px;font-weight:300;line-height:23px;margin-top:12px;letter-spacing:-.03em;color:rgba(255,255,255,.9)}
.remote-banner__link{position:absolute;right:40px;bottom:30px;z-index:2;display:inline-flex;align-items:center;gap:12px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.remote-banner__link .circle-arrow{width:30px;height:30px;border-width:1px}
.remote-banner__link .circle-arrow::before{transform:rotate(45deg);-webkit-mask-size:55%;mask-size:55%;transition:transform .35s var(--ease)}
.remote-banner:hover .circle-arrow{background:#fff;color:var(--black);border-color:#fff}
.remote-banner:hover .circle-arrow::before{transform:rotate(0)}
.remote-page .cta{margin-top:72px}

/* =====================================================
   SUPPORT — 기본 상담 / 방문 예약 / A/S 접수 (시안 1-281 + 전달 HTML 항목)
   ===================================================== */
.sup{padding:97px 0 198px}
.sup__inner{display:grid;grid-template-columns:740px 360px;justify-content:space-between;align-items:start}
.form-card{padding:60px 60px 66px;border:1px solid #dcdcdc;border-radius:10px;background:#fff}
.form-req{font-size:13px;color:var(--gray);line-height:30px;letter-spacing:-.03em}
.form-req em,.fl em{font-style:normal;color:var(--point);margin-left:2px}
.form-row{display:grid;grid-template-columns:300px 300px;justify-content:space-between}
.fg{margin-top:28px}
.form-row .fg{margin-top:28px}
.fl{display:flex;align-items:baseline;gap:15px;font-size:15px;font-weight:700;line-height:30px;letter-spacing:-.03em;color:var(--black)}
.fl .fh{font-size:11px;font-weight:300;color:var(--gray);letter-spacing:-.03em}
.fi,.ft{
  display:block;width:100%;height:42px;padding:0 15px;border:.7px solid #dcdcdc;border-radius:5px;background:#fff;
  font:inherit;font-size:14px;color:var(--black);margin-top:4px;transition:border-color .25s,box-shadow .25s;
}
.fi::placeholder,.ft::placeholder{color:#c3c3c3}
.fi:focus,.ft:focus{outline:none;border-color:var(--point);box-shadow:0 0 0 3px rgba(30,86,224,.1)}
select.fi{appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23999' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right 15px center/12px 8px no-repeat}
.ft{height:110px;padding:12px 15px;resize:vertical;line-height:1.6}
.radios{display:grid;grid-template-columns:300px 300px;gap:10px 40px;margin-top:8px}
.rd{position:relative;display:block;cursor:pointer}
.rd input{position:absolute;opacity:0;width:0;height:0}
.rd span{
  display:flex;align-items:center;justify-content:center;height:42px;padding:0 14px;border:.7px solid #dcdcdc;border-radius:5px;
  font-size:13px;color:var(--gray);letter-spacing:-.03em;white-space:nowrap;transition:.25s;
}
.rd:hover span{border-color:var(--point);color:var(--point)}
.rd input:checked + span{background:var(--point);border-color:var(--point);color:#fff;font-weight:700}
.rd input:focus-visible + span{box-shadow:0 0 0 3px rgba(30,86,224,.2)}
.etc-wrap{display:none;margin-top:10px}
.etc-wrap.is-show{display:block}
.file-wrap{margin-top:4px}
.file-wrap input{display:block;width:100%;font-size:13px;color:var(--gray)}
.file-wrap input::file-selector-button{margin-right:12px;padding:0 16px;height:34px;border:1px solid #dcdcdc;border-radius:5px;background:#fff;font:inherit;font-size:13px;color:var(--black);cursor:pointer;transition:.25s}
.file-wrap input::file-selector-button:hover{border-color:var(--point);color:var(--point)}
.file-wrap p{margin-top:8px;font-size:12px;line-height:18px;color:var(--gray);letter-spacing:-.03em}
.agree{display:flex;gap:10px;margin-top:30px;font-size:13px;line-height:20px;color:var(--gray);letter-spacing:-.03em;cursor:pointer}
.agree input{flex-shrink:0;width:15px;height:15px;margin-top:2px;accent-color:var(--point)}
.agree b{font-weight:700;color:var(--black)}
.agree a{text-decoration:underline;text-underline-offset:2px;color:var(--black)}
.form-foot{display:flex;justify-content:center;margin-top:44px}
.btn-submit{
  display:inline-flex;align-items:center;justify-content:center;width:210px;height:55px;border-radius:100px;background:var(--point);
  color:#fff;font-size:17px;font-weight:700;letter-spacing:-.01em;transition:background .3s,transform .3s var(--ease),box-shadow .3s;
}
.btn-submit:hover{background:#1747bf;transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,86,224,.25)}
.btn-line{display:inline-flex;align-items:center;justify-content:center;width:150px;height:55px;border-radius:100px;border:1px solid #ccc;color:var(--gray);font-size:17px;font-weight:500;transition:.3s}
.btn-line:hover{border-color:var(--black);color:var(--black)}
.form-msg{display:none;margin-top:24px;padding:14px 20px;border-radius:5px;background:rgba(30,86,224,.06);font-size:14px;color:var(--point);text-align:center}
.form-msg.is-show{display:block}

/* 방문 희망 시간: 4개 시간대 타일 (300px 안 2×2) */
.radios--time{grid-template-columns:1fr 1fr;gap:10px}
.radios--time .rd span{flex-direction:column;justify-content:center;gap:2px;height:56px;line-height:1.1}
.radios--time .rd span b{font-size:17px;font-weight:700;letter-spacing:-.02em}
.radios--time .rd span small{font-size:11px;font-weight:400;opacity:.8}
.radios--time .rd input:checked + span b{font-weight:800}

/* 날짜 선택(커스텀 달력): 읽기전용 입력 + 팝오버 */
.dp{position:relative}
.dp__input{cursor:pointer;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23999' stroke-width='1.5'%3E%3Crect x='2.5' y='4' width='15' height='13' rx='2'/%3E%3Cpath d='M2.5 8.5h15M6.5 2.5v3M13.5 2.5v3'/%3E%3C/svg%3E") right 13px center/16px 16px no-repeat}
.dp.is-open .dp__input{border-color:var(--point);box-shadow:0 0 0 3px rgba(30,86,224,.1)}
.dp__pop{
  position:absolute;left:0;top:calc(100% + 8px);z-index:30;width:320px;padding:18px 18px 14px;border:1px solid #dcdcdc;border-radius:10px;background:#fff;
  box-shadow:0 18px 40px rgba(0,0,0,.12);animation:dp-in .25s var(--ease);
}
@keyframes dp-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.dp__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.dp__title{font-size:16px;font-weight:700;letter-spacing:-.02em}
.dp__nav{position:relative;width:32px;height:32px;border-radius:50%;border:1px solid #e3e3e3;transition:background .25s,border-color .25s}
.dp__nav::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -2px;border-left:1.5px solid var(--black);border-bottom:1.5px solid var(--black);transform:rotate(45deg);transition:border-color .25s}
.dp__nav--next::before{margin-left:-6px;transform:rotate(-135deg)}
.dp__nav:hover{background:var(--point);border-color:var(--point)}
.dp__nav:hover::before{border-color:#fff}
.dp__nav[disabled]{opacity:.3;pointer-events:none}
.dp__week,.dp__grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.dp__week span{font-size:12px;font-weight:600;color:var(--gray);padding:6px 0}
.dp__week span:first-child{color:#e0483a}
.dp__grid button{position:relative;height:38px;margin:1px 0;border-radius:50%;font-size:14px;color:var(--black);transition:background .2s,color .2s}
.dp__grid button:hover{background:rgba(30,86,224,.08);color:var(--point)}
.dp__grid button.is-out{color:#cfcfcf}
.dp__grid button.is-sun{color:#e0483a}
.dp__grid button.is-today::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--point)}
.dp__grid button.is-sel{background:var(--point);color:#fff;font-weight:700}
.dp__grid button.is-sel::after{background:#fff}
.dp__grid button[disabled]{color:#d5d5d5;pointer-events:none;text-decoration:line-through;text-decoration-color:#e0e0e0}
.dp__note{margin-top:10px;padding-top:10px;border-top:1px solid var(--gray-line);font-size:12px;color:var(--gray);letter-spacing:-.03em}

/* 우측 안내 박스 */
.aside{display:grid;gap:20px;position:sticky;top:30px}
.abox{padding:40px 40px 40px;border:1px solid #dcdcdc;border-radius:10px;background:#fff}
.abox--point{background:var(--point);border-color:var(--point);color:#fff;min-height:240px}
.abox__title{font-size:20px;font-weight:700;line-height:27px;letter-spacing:-.03em}
.abox__tel{display:block;font-size:30px;font-weight:900;line-height:36px;margin-top:22px;color:#fff;letter-spacing:-.01em;transition:opacity .3s}
.abox__tel:hover{opacity:.85}
.abox__note{font-size:15px;line-height:25px;margin-top:20px;color:rgba(255,255,255,.85);letter-spacing:-.03em}
.abox__list{margin-top:26px}
.abox__list li{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px;line-height:20px;letter-spacing:-.03em}
.abox__list li + li{margin-top:17px}
.abox__list b{font-weight:700;color:var(--black);white-space:nowrap}
.abox__list span{color:#878787;text-align:right;font-weight:300}
.abox__text{font-size:15px;line-height:25px;color:#878787;margin-top:14px;letter-spacing:-.03em}
.abox .tlink{margin-top:26px}

.sup-process{padding:186px 0 202px;background:var(--bg-soft)}
.sup-process .sec-title--sub{margin-top:22px}

/* =====================================================
   BOARD — 문의 게시판 (시안 1-7) + 글쓰기 / 상세 (전달 HTML 구조)
   ===================================================== */
.board{padding:124px 0 100px}
.board__top{display:flex;align-items:center;justify-content:space-between;gap:30px}
.board__total{font-size:13px;color:var(--gray);letter-spacing:-.03em}
.board__total b{color:var(--point);font-weight:700;margin-left:4px}
.board__search{display:flex;align-items:center;width:415px;height:55px;padding:0 24px 0 32px;border-radius:100px;background:#f7f7f7}
.board__search select{appearance:none;width:82px;padding-right:18px;border:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23666' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right 4px center/11px 7px no-repeat;font:inherit;font-size:15px;color:var(--black);cursor:pointer}
.board__search select:focus{outline:none}
.board__search input{flex:1;min-width:0;height:100%;padding:0 12px 0 24px;border:0;background:transparent;font:inherit;font-size:15px;color:var(--black)}
.board__search input::placeholder{color:#a3a3a3}
.board__search input:focus{outline:none}
.board__search button{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;transition:transform .3s var(--ease)}
.board__search button img{width:20px;height:20px}
.board__search button:hover{transform:scale(1.12)}
.board__list{margin-top:31px;border-top:1px solid var(--black)}
.board__list li{border-bottom:1px solid var(--gray-line)}
.board__list a{display:grid;grid-template-columns:110px 1fr 90px 130px;align-items:center;gap:0 20px;height:87px;padding:0 40px;color:var(--black);transition:background .25s}
.board__list a:hover{background:#fbfcff}
.board__list .status{justify-self:start}
.status{display:inline-flex;align-items:center;justify-content:center;width:110px;height:33px;border-radius:100px;border:1px solid #dcdcdc;font-size:13px;font-weight:500;color:var(--gray);letter-spacing:-.03em}
.status--done{background:var(--point);border-color:var(--point);color:#fff;font-weight:700}
.board__subj{display:flex;align-items:center;gap:20px;min-width:0;font-size:15px;letter-spacing:-.03em}
.board__subj span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .25s}
.board__list a:hover .board__subj span{color:var(--point);font-weight:600}
.board__subj img{width:19px;height:21px;flex-shrink:0}
.board__writer{font-size:15px;letter-spacing:-.03em;text-align:center}
.board__date{font-size:15px;color:#878787;font-weight:300;letter-spacing:-.03em;text-align:right}
.board__foot{display:flex;align-items:center;justify-content:space-between;margin-top:50px}
.paging{display:flex;align-items:center;gap:8px}
.paging a{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:13px;color:var(--black);transition:.25s}
.paging a:hover{color:var(--point)}
.paging a.is-on{background:var(--point);color:#fff;font-weight:700}
.paging a.is-arrow{width:24px;height:24px;font-size:16px;color:var(--gray)}
.paging a.is-arrow:first-child{margin-right:8px}
.paging a.is-arrow:last-child{margin-left:8px}
.btn-dark{display:inline-flex;align-items:center;justify-content:center;width:210px;height:55px;border-radius:100px;background:var(--dark);color:#fff;font-size:17px;font-weight:700;letter-spacing:-.01em;transition:background .3s,transform .3s var(--ease)}
.btn-dark:hover{background:var(--point);transform:translateY(-2px)}
.board__note{margin-top:73px;padding:40px;border-radius:10px;background:var(--bg-soft);font-size:15px;line-height:27px;color:#878787;letter-spacing:-.03em}
.board__note a{color:var(--point);text-decoration:underline;text-underline-offset:2px}

/* 글쓰기 (행 레이아웃) */
.wf{margin-top:56px;border-top:1px solid var(--black)}
.wf__row{display:grid;grid-template-columns:200px 1fr;align-items:start;border-bottom:1px solid var(--gray-line)}
.wf__k{display:flex;align-items:center;min-height:81px;padding-left:40px;font-size:17px;font-weight:700;letter-spacing:-.03em;background:var(--bg-soft);align-self:stretch}
.wf__k em{font-style:normal;color:var(--point);margin-left:3px}
.wf__v{padding:19px 40px}
.wf__v .fi,.wf__v .ft{margin-top:0}
.wf__half{width:400px;max-width:100%}
.wf__hint{margin-top:8px;font-size:12px;color:var(--gray);letter-spacing:-.03em}
.wf__row .ft{height:240px}
.wf__row .file-wrap{margin-top:0}
.wf__foot{display:flex;justify-content:center;gap:15px;margin-top:50px}
.pw-wrap{display:none;margin-top:12px}
.pw-wrap.is-show{display:block}
.secret{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--black);cursor:pointer}
.secret input{accent-color:var(--point);width:15px;height:15px}

/* 상세 보기 */
.bv{margin-top:56px;border-top:1px solid var(--black)}
.bv__head{padding:36px 40px;border-bottom:1px solid var(--gray-line)}
.bv__title{display:flex;align-items:center;gap:20px;margin-top:20px;font-size:25px;font-weight:700;letter-spacing:-.03em}
.bv__title img{width:19px;height:21px}
.bv__meta{display:flex;gap:28px;margin-top:16px;font-size:14px;color:var(--gray);letter-spacing:-.03em}
.bv__meta b{font-weight:500;color:var(--black);margin-left:6px}
.bv__body{padding:40px;font-size:16px;line-height:30px;color:#555;letter-spacing:-.03em;min-height:220px}
.bv__body p + p{margin-top:16px}
.bv__file{display:flex;align-items:center;gap:14px;padding:22px 40px;border-top:1px solid var(--gray-line);border-bottom:1px solid var(--gray-line);font-size:14px;letter-spacing:-.03em}
.bv__file b{font-weight:700}
.bv__file a{color:var(--point);text-decoration:underline;text-underline-offset:2px}
.bv__file small{color:var(--gray)}
.bv__ans{position:relative;margin:30px 0 0;padding:40px 40px 40px 120px;border-radius:10px;background:var(--bg-soft)}
.bv__ans .rt{position:absolute;left:40px;top:40px;display:inline-flex;align-items:center;justify-content:center;width:56px;height:30px;border-radius:100px;background:var(--point);color:#fff;font-size:13px;font-weight:700}
.bv__ans h3{font-size:20px;font-weight:700;letter-spacing:-.03em}
.bv__ans p{margin-top:14px;font-size:15px;line-height:27px;color:#666;letter-spacing:-.03em}
.bv__ans .who{margin-top:18px;font-size:13px;color:var(--gray)}
.bv__nav{margin-top:40px;border-top:1px solid var(--gray-line)}
.bv__nav a{display:grid;grid-template-columns:90px 1fr 110px;align-items:center;gap:20px;height:60px;padding:0 40px;border-bottom:1px solid var(--gray-line);font-size:15px;color:var(--black);transition:background .25s}
.bv__nav a:hover{background:#fbfcff}
.bv__nav .dir{font-size:13px;color:var(--gray)}
.bv__nav .dt{text-align:right;color:#878787;font-weight:300}
.bv__foot{display:flex;justify-content:space-between;align-items:center;margin-top:50px}
.pw-gate{max-width:480px;margin:56px auto 0;padding:50px 40px;border:1px solid #dcdcdc;border-radius:10px;text-align:center}
.pw-gate h2{font-size:20px;font-weight:700;letter-spacing:-.03em}
.pw-gate p{margin-top:8px;font-size:14px;color:var(--gray)}
.pw-gate .fi{margin-top:24px;text-align:center}
.pw-gate .btn-submit{margin-top:20px;width:100%}

/* =====================================================
   LEGAL — 이용약관 / 개인정보처리방침
   ===================================================== */
.legal{padding:90px 0 180px}
.legal__body{padding-top:40px;border-top:1px solid var(--black);font-size:17px;line-height:30px;color:#555;letter-spacing:-.03em}
.legal__meta{font-size:14px;color:var(--gray)}
.legal__body h2{margin-top:48px;font-size:22px;font-weight:700;line-height:32px;color:var(--black)}
.legal__body h2 + p,.legal__body h2 + ul{margin-top:12px}
.legal__body p + p,.legal__body p + ul,.legal__body ul + p{margin-top:10px}
.legal__body ul li{position:relative;padding-left:16px}
.legal__body ul li::before{content:"·";position:absolute;left:2px;font-weight:700;color:var(--point)}
.legal__contact{margin-top:60px!important;padding-top:24px;border-top:1px solid var(--gray-line);font-weight:600;color:var(--black)}

/* =====================================================
   RESPONSIVE
   ===================================================== */
.reveal-up{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.2s var(--ease)} /* 2026-10-20 .8s→1.1s, 묶음 지연은 style.css .reveal-stagger + sub.js */
.reveal-up.is-in{opacity:1;transform:none}

@media (max-width:1600px){
  .sub-hero__top{padding-inline:var(--gutter)}
  .about-story__inner{grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:40px}
  .about-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .about-card{height:auto;padding-bottom:40px}
  .about-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:60px}
  .about-step + .about-step::before{left:-30px}
  .about-three .badge{right:var(--gutter)}
  .loc-map__inner{grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:40px}
  .loc-map__map{width:100%;margin-left:0}
  .loc-map .badge{right:var(--gutter)}
  .loc-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .loc-visit__inner{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:40px}
}
@media (max-width:1280px){
  .sub-hero__title{font-size:56px;line-height:1.2}
  .sub-hero__cap{font-size:22px}
  .about-story__title,.sec-title--sub,.loc-map__title{font-size:44px;line-height:1.3}
  .about-story{padding:120px 0}
  .about-three,.about-way,.loc-branches,.loc-visit{padding:120px 0}
  .loc-map{padding-top:140px}
  .cta__big{font-size:56px}
  .cta__title{font-size:36px;line-height:1.3}
}
@media (max-width:1280px){
  .prod-head__title{font-size:56px;line-height:1.2}
  .prod-head__sub{font-size:22px}
  .model-tabs a{font-size:17px;padding:0 10px 8px}
  .prod-intro__inner{grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:40px}
  .prod-intro__img{height:auto;aspect-ratio:474/510}
  .prod-intro__body{padding-left:0}
  .prod-stats{width:auto;margin-left:0;padding-left:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px}
  .prod-btns{margin-left:0}
  .prod-intro__name{font-size:40px;line-height:1.3}
  .feat-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px}
  .feat,.spec,.compare{padding:120px 0}
  .spec-table th{width:200px;padding-left:30px;font-size:19px}
  .spec-table td{padding-left:40px;font-size:17px}
  .cmp-table col{width:auto!important}
  .vgrid,.ggrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 20px}
  .vcard__thumb{height:auto;aspect-ratio:360/205}
}
@media (max-width:1024px){
  .vgrid,.ggrid{grid-template-columns:1fr 1fr;gap:36px 20px;margin-top:50px}
  .ref-list{padding:40px 0 80px}
  .gcard__ov{opacity:1;padding:16px;background:linear-gradient(0deg,rgba(0,0,0,.8) 0%,transparent 58%)}
}
@media (max-width:640px){
  .vgrid,.ggrid{grid-template-columns:1fr}
  .filter{gap:8px}
  .filter button{height:38px;padding:0 16px;font-size:14px}
  .filter button.is-on{padding:0 20px}
  .btn-more-outline{width:200px;height:50px;font-size:18px}
}
@media (max-width:1024px){
  .prod-head__row{flex-direction:column;align-items:flex-start;gap:16px}
  .model-tabs{flex-wrap:wrap;gap:4px 0;margin-bottom:0}
  .prod-intro{padding:50px 0 100px}
  .prod-intro__inner{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr;margin-top:50px}
  .feat-item{min-height:0;padding:36px 10px 36px 90px}
  .feat-item:nth-child(n+3){border-bottom:0}
  .feat-item:last-child{border-bottom:1px solid var(--gray-line)}
  .feat-item__num{top:46px;left:10px}
  .spec__head{flex-direction:column;align-items:flex-start;gap:8px}
  .spec-table th{width:130px;padding-left:16px;font-size:16px;letter-spacing:0}
  .spec-table td{padding-left:20px;font-size:15px;line-height:1.5}
  .spec-table th,.spec-table td{height:60px}
  .cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmp-table{min-width:900px}
  .sub-hero{padding-top:50px}
  .sub-hero__top{flex-direction:column;align-items:flex-start;gap:20px}
  .sub-hero__title{font-size:44px}
  .sub-hero__img{height:300px;border-radius:24px 24px 0 0}
  .sub-hero__cap{height:auto;padding:100px var(--gutter) 40px;font-size:18px;border-radius:24px}
  .about-story__inner{grid-template-columns:1fr}
  .about-story__img{height:auto;aspect-ratio:510/435}
  .about-story__body{font-size:18px;line-height:1.7;margin-top:30px}
  .about-cards{grid-template-columns:1fr;gap:20px;margin-top:50px}
  .about-card__img{height:auto;aspect-ratio:330/230}
  .about-steps{grid-template-columns:1fr;gap:40px;margin-top:40px}
  .about-step + .about-step::before{display:none}
  .badge{display:none}
  .cta{height:auto;padding-inline:var(--gutter)} /* 2026-10-20: 모바일에서 펼쳐져도 화면 끝에 붙지 않게 좌우 여백 */
  .cta__box{position:relative;left:0;transform:none;width:100%;height:auto;padding:60px var(--gutter)}
  .cta__big{position:static;font-size:44px;line-height:1.2}
  .cta__inner{position:static;transform:none;width:auto;flex-direction:column;align-items:flex-start;gap:30px;display:none}
  .cta.is-open .cta__big{display:none}
  .cta.is-open .cta__inner{display:flex}
  .cta.is-open .cta__box{width:100%;border-radius:20px}
  .cta__btns{flex-wrap:wrap}
  .loc-map__inner{grid-template-columns:1fr}
  .loc-map__map{max-width:420px;margin:0 auto}
  .loc-list a{padding-inline:12px}
  .loc-cards{grid-template-columns:1fr 1fr;gap:20px}
  .loc-card{height:auto;padding-bottom:90px}
  .loc-card__img{height:auto;aspect-ratio:360/220}
  .loc-visit__inner{grid-template-columns:1fr}
  .loc-visit__map{height:auto;aspect-ratio:605/441}
}
@media (max-width:640px){
  .sub-hero__label{font-size:17px}
  .sub-hero__title{font-size:34px}
  .sub-tabs a{width:auto;height:46px;padding:0 22px;font-size:15px}
  .sub-hero__img{height:220px}
  .about-story__title,.sec-title--sub,.loc-map__title{font-size:30px}
  .about-story__lead{font-size:18px;line-height:1.5}
  .about-card__body{padding:24px 8px 0}
  .about-step__num{font-size:44px}
  .cta__big{font-size:32px}
  .cta__title{font-size:26px}
  .cta__desc{font-size:16px;white-space:normal} /* 2026-10-20 좁은 폰에서 잘리지 않게 줄바꿈 허용 */
  .cta__btns a{width:auto;padding:0 22px;height:46px;font-size:15px}
  .loc-cards{grid-template-columns:1fr}
  .loc-info dd{font-size:17px}
}

/* ---------- 지원·교육 / 고객센터 반응형 ---------- */
@media (max-width:1280px){
  .edu-cards,.edu-photos{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .edu-card{height:auto;padding-bottom:40px}
  .edu-photos li{height:auto;aspect-ratio:360/250}
  .edu-intro,.edu-class,.edu-process{padding:120px 0}
  .psteps--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
  .psteps--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
  .remote-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto}
  .remote-card{padding-bottom:30px}
  .remote-program{padding:40px 24px}
  .remote-banners{grid-template-columns:1fr 1fr;gap:20px}
  .sup__inner{grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:30px}
  .form-card{padding:40px}
  .form-row,.radios{grid-template-columns:1fr 1fr;gap:10px 24px}
  .abox{padding:30px}
  .sup-process{padding:120px 0}
  .board{padding:80px 0}
  .dl-table col{width:auto!important}
}
@media (max-width:1024px){
  .sec-title--sub.is-sm{font-size:40px;line-height:1.3}
  .sec-desc{font-size:17px;line-height:1.6}
  .edu-cards{grid-template-columns:1fr}
  .edu-photos{grid-template-columns:1fr 1fr}
  .edu-videos{margin-top:80px}
  .psteps--3,.psteps--4{grid-template-columns:1fr 1fr;gap:40px 30px;margin-top:50px}
  .remote-grid{grid-template-columns:1fr 1fr}
  .remote-program{grid-column:1 / -1;grid-row:auto;padding:50px 24px}
  .remote-banners{grid-template-columns:1fr}
  .sup{padding:50px 0 100px}
  .sup__inner{grid-template-columns:1fr}
  .aside{position:static}
  .board__top{flex-direction:column;align-items:stretch;gap:16px}
  .board__search{width:100%}
  .board__list a{grid-template-columns:90px 1fr 70px 100px;padding:0 12px;gap:0 12px}
  .status{width:90px}
  .board__foot{flex-direction:column;gap:24px}
  .wf__row{grid-template-columns:1fr}
  .wf__k{min-height:48px;padding-left:16px;font-size:15px}
  .wf__v{padding:14px 16px}
  .wf__half{width:100%}
  .dl-table thead th,.dl-table tbody td{padding-left:16px;font-size:14px}
  .dl-table thead th{height:60px;font-size:16px}
  .dl-table tbody td{height:70px}
  .bv__head,.bv__body,.bv__file,.bv__ans{padding-inline:16px}
  .bv__ans{padding-left:16px;padding-top:80px}
  .bv__ans .rt{left:16px;top:30px}
  .bv__nav a{grid-template-columns:70px 1fr 90px;padding:0 12px}
}
@media (max-width:640px){
  .edu-photos,.psteps--3,.psteps--4,.remote-grid,.form-row,.radios{grid-template-columns:1fr}
  .edu-card__title,.pstep__title,.remote-banner__title{font-size:20px}
  .remote-banner{height:180px}
  .remote-banner__body{left:20px;top:24px}
  .remote-banner__link{right:20px;bottom:20px}
  .form-card{padding:24px 16px}
  .board__list a{grid-template-columns:76px 1fr 80px;height:auto;padding:14px 8px}
  .board__date{display:none}
  .status{width:76px;height:28px;font-size:12px}
  .board__note{padding:20px;font-size:14px}
  .btn-dark,.btn-submit{width:100%}
  .bv__title{font-size:20px}
  .bv__foot{flex-direction:column;gap:12px}
}

/* ---------- 모바일 보정 (2026-09-15 점검) ---------- */
@media (max-width:1024px){
  .sub-hero__cap{display:block;text-align:center;line-height:1.6}
  .sub-hero__cap b{display:inline}
  .sub-hero__visual{transform:none!important}
  .loc-list a{grid-template-columns:minmax(0,1fr) auto 23px;gap:10px;padding:10px 12px}
  .loc-list b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:40px}
  .loc-list span{font-size:14px;margin-right:0}
  .prod-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}
  .prod-stats b{font-size:22px;line-height:1.2;white-space:normal}
  .prod-stats span{font-size:14px}
  .prod-btns{flex-wrap:wrap;gap:10px}
  .prod-btns a{width:calc(50% - 5px);height:50px;font-size:17px}
  .fl{flex-wrap:wrap;gap:4px 12px}
  .fl .fh{flex-basis:100%;line-height:1.4}
  .dl-pill{min-width:0;padding:0 10px;font-size:12px;height:28px}
  .dl-btn{width:36px;height:36px}
  .dl-table th:nth-child(3),.dl-table td:nth-child(3){display:none}
  .board__search{padding:0 16px 0 18px;height:48px}
  .board__search select{width:64px;font-size:14px}
  .board__search input{font-size:14px;padding-left:12px}
  .aside{gap:14px}
  .abox__tel{font-size:26px}
  .edu-videos .vcard__thumb{height:auto;aspect-ratio:360/205}
  .remote-program__btn{width:100%;max-width:280px}
}
@media (max-width:640px){
  .prod-stats{grid-template-columns:1fr 1fr;gap:16px 12px}
  .prod-stats b{font-size:20px}
  .prod-intro__name{font-size:30px;line-height:1.3}
  .prod-head__sub--sm{font-size:16px;line-height:1.6;margin-top:20px}
  .sub-hero__cap{font-size:16px;padding:90px 20px 32px}
  .about-story__title{font-size:30px;line-height:1.35}
  .about-story__lead{font-size:17px}
  .about-story__body{font-size:16px;line-height:1.75}
  .loc-map__title{font-size:30px;line-height:1.3}
  .form-card{padding:24px 16px 28px}
  .radios--time{grid-template-columns:1fr 1fr}
  .dp__pop{width:min(320px,calc(100vw - 32px))}
  .cta__title{font-size:24px;line-height:1.35}
}@media (max-width:640px){
  .dl-table{table-layout:auto}
  .dl-table colgroup{display:none}
  .dl-table thead th,.dl-table tbody td{padding-left:10px;font-size:13px}
  .dl-table th:last-child,.dl-table td:last-child{width:56px}
  .dl-pill{white-space:nowrap;font-size:11px;padding:0 8px}
}@media (max-width:1024px){ .edu-videos{padding:90px 0} .edu-videos__head{flex-direction:column;align-items:flex-start;gap:16px} .edu-videos .vgrid{grid-template-columns:1fr 1fr;gap:20px} .edu-videos .vcard{opacity:1;transform:none} }
@media (max-width:640px){ .edu-videos .vgrid{grid-template-columns:1fr} }