@charset "utf-8";
/* ============================================================
   센텀HJ풋볼클럽 — 사이트 디자인
   그누보드5 리빌더 rb.basic 테마 위에 얹는 커스텀 스타일.
   이 파일은 rb.layout_hd/hjfc/header.php 에서만 불러온다.
   (= hjfc 헤더 레이아웃이 선택돼 있을 때만 적용된다)
   ============================================================ */

/* ---- 서체 --------------------------------------------------
   Pretendard 는 테마에 이미 들어 있는 파일을 그대로 쓴다.
   테마 기본 정의(font-H/font-B/font-R)는 굵기별로 패밀리가
   나뉘어 있어 다루기 불편해서, 같은 파일로 하나만 다시 잡는다. */
@font-face{font-family:'Pretendard HJ';font-weight:400;font-display:swap;
  src:local('Pretendard Regular'),url(../rb.fonts/Pretendard/woff2/Pretendard-Regular.woff2) format('woff2'),url(../rb.fonts/Pretendard/woff/Pretendard-Regular.woff) format('woff')}
@font-face{font-family:'Pretendard HJ';font-weight:700;font-display:swap;
  src:local('Pretendard Bold'),url(../rb.fonts/Pretendard/woff2/Pretendard-Bold.woff2) format('woff2'),url(../rb.fonts/Pretendard/woff/Pretendard-Bold.woff) format('woff')}
@font-face{font-family:'Pretendard HJ';font-weight:900;font-display:swap;
  src:local('Pretendard Black'),url(../rb.fonts/Pretendard/woff2/Pretendard-Black.woff2) format('woff2'),url(../rb.fonts/Pretendard/woff/Pretendard-Black.woff) format('woff')}

:root{
  /* ------------------------------------------------------------
     엠블럼의 황동빛 금색과 구장 벽면의 따뜻한 먹색이 축이다.
     파랑(곤색)은 UI에 쓰지 않는다 — 파랑은 사진 속 유니폼이 맡는다.
     흰색도 순백 대신 살짝 따뜻한 종이색을 쓴다.
     ------------------------------------------------------------ */
  --hj-brass:#b4832b;      /* 면(배경)으로 쓰는 금색 */
  --hj-brass-l:#d3a44a;
  --hj-brass-d:#96691b;
  --hj-brass-ink:#835d11;  /* 밝은 바탕 위 글자용 (대비 확보) */
  --hj-brass-bg:rgba(180,131,43,.11);

  --hj-dark:#131211;       /* 히어로·푸터 바탕 */
  --hj-dark-2:#22201d;
  --hj-dark-3:#302c27;

  --hj-ink:#16130e;
  --hj-ink-2:#4b453b;
  --hj-muted:#8c8579;
  --hj-line:#e6dfd2;
  --hj-line-d:rgba(255,255,255,.14);
  --hj-bg:#fffdfa;
  --hj-bg-soft:#f7f3ec;
  --hj-bg-soft2:#ece4d6;

  --hj-r:10px;            /* 카드 */
  --hj-r-s:6px;           /* 배지·태그 */
  --hj-sh:0 1px 2px rgba(30,22,8,.05),0 8px 24px rgba(30,22,8,.07);
  --hj-sh-up:0 2px 6px rgba(30,22,8,.08),0 18px 44px rgba(30,22,8,.12);
  --hj-max:1180px;
  --hj-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- 리빌더 컨테이너 해제 ----------------------------------
   rb.basic 은 .contents_wrap 을 grid 로 두고 .index/.sub 를
   가운데 정렬(shrink-to-fit)한다. 전면폭 섹션을 쓰려면 풀어야 한다.
   폭 제한은 아래 .hj-wrap 이 대신 맡는다. */
.contents_wrap{display:block}
/* rb.basic head.php 가 헤더 높이만큼 padding-top 을 인라인으로 넣는다.
   우리는 화면마다 여백을 직접 잡으므로 그 값을 무효로 만든다. */
.contents_wrap{padding-top:0!important}
.contents_wrap>.index,
.contents_wrap>.sub{width:100%;max-width:none;padding-left:0;padding-right:0}
.contents_wrap>.sub{padding-top:0;padding-bottom:0}
.contents_wrap>.index{padding-top:0;padding-bottom:0;margin:0}

/* 우리가 만든 페이지가 아닌 화면(게시판·회원)은 가운데 폭을 유지한다.
   위에서 컨테이너를 푼 게 그쪽까지 번지면 안 된다. */
body:not(:has(.hj-page)) .contents_wrap>.sub{
  max-width:var(--hj-max);margin:0 auto;padding:calc(74px + 40px) 24px 72px}

/* 서브페이지 자동 제목(h2#container_title)은 페이지마다 직접 넣는다 */
body:has(.hj-page) #container_title{display:none}
body:has(.hj-page) .rb_bo_top,
body:has(.hj-page) .rb_co_top,
body:has(.hj-page) .rb_fr_top{display:none}

/* 리빌더는 컨테이너 안쪽 맨 위에 상단비주얼과 캐러셀을 그린다.
   우리 화면은 자체 머리글을 갖고 있어서 그 위에 또 띠가 붙으면 안 된다.
   (캐러셀은 테마 기본값이 '사용'이라 환경설정에서도 꺼 두는 게 좋다) */
body:has(.hj-page) #rb_topvisual{display:none}
body:has(.hj-hero) .rb_carousel{display:none}
#container_title{font-size:clamp(24px,3vw,34px);font-weight:900;letter-spacing:-.03em;
  margin:0 0 28px;color:var(--hj-ink)}

/* ---- 기본 ---------------------------------------------------- */
.hj{font-family:'Pretendard HJ',Pretendard,-apple-system,'Malgun Gothic',sans-serif;
  color:var(--hj-ink);line-height:1.68;font-size:16px;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
.hj *{box-sizing:border-box}
.hj img{display:block;max-width:100%}
.hj a{color:inherit;text-decoration:none}
.hj h1,.hj h2,.hj h3,.hj h4{line-height:1.22;letter-spacing:-.03em;font-weight:900;margin:0}
.hj p{margin:0}
.hj ul{list-style:none;margin:0;padding:0}
.hj-wrap{width:100%;max-width:var(--hj-max);margin:0 auto;padding:0 24px}
/* 그누보드 기본 CSS 가 안 붙는 자리에서도 화면에서 감춰지도록 여기서도 정의한다 */
.hj .sound_only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.hj-en{font-family:Anton,'Pretendard HJ',sans-serif;font-weight:400}

/* 섹션 리듬 — 전부 같은 값으로 채우지 않는다 */
.hj-sec{padding:96px 0}
.hj-sec--tight{padding:68px 0}
.hj-sec--wide{padding:124px 0}
.hj-sec--dark{background:var(--hj-dark);color:#fff}
.hj-sec--soft{background:var(--hj-bg-soft)}

/* 섹션 머리 */
.hj-head{max-width:640px;margin-bottom:44px}
.hj-head--center{margin-left:auto;margin-right:auto;text-align:center}
.hj-kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hj-brass-ink);margin-bottom:12px}
.hj-sec--dark .hj-kicker,.hj-hero .hj-kicker{color:var(--hj-brass-l)}
.hj-head h2{font-size:clamp(27px,3.4vw,40px);margin-bottom:12px}
.hj-head p{color:var(--hj-ink-2);font-size:16px}
.hj-sec--dark .hj-head p{color:rgba(255,255,255,.72)}

/* ---- 버튼 ----------------------------------------------------
   금색 면 + 진한 글자. 그라디언트·발광 그림자는 쓰지 않는다. */
.hj-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:4px;
  font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;
  font-family:inherit;transition:background .18s,border-color .18s,color .18s}
/* .hj a{color:inherit} 보다 우선하도록 .hj 를 앞에 붙인다 */
.hj .hj-btn--gold{background:var(--hj-brass);color:#16110a;border-color:var(--hj-brass)}
.hj .hj-btn--gold:hover{background:var(--hj-brass-l);border-color:var(--hj-brass-l)}
.hj .hj-btn--ink{background:var(--hj-ink);color:var(--hj-bg);border-color:var(--hj-ink)}
.hj .hj-btn--ink:hover{background:var(--hj-dark-3);border-color:var(--hj-dark-3)}
.hj .hj-btn--line{background:transparent;color:var(--hj-ink);border-color:var(--hj-line)}
.hj .hj-btn--line:hover{border-color:var(--hj-ink);background:var(--hj-bg-soft)}
.hj .hj-btn--line-w{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.hj .hj-btn--line-w:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.hj-btn--sm{padding:10px 18px;font-size:14px}

/* ---- 헤더 ----------------------------------------------------- */
.hj-header{position:fixed;top:0;left:0;right:0;z-index:1000;
  border-bottom:1px solid transparent;transition:background .25s,border-color .25s}
/* backdrop-filter 는 쓰지 않는다.
   필터가 걸린 요소는 position:fixed 자손의 기준 박스가 되어 버려서,
   헤더 안에 있는 모바일 메뉴 서랍이 헤더 높이(65px)에 갇힌다.
   배경이 이미 97% 불투명이라 블러는 눈에 띄지도 않는다. */
.hj-header.is-solid{background:rgba(255,253,250,.97);
  border-bottom-color:var(--hj-line)}

/* 리빌더는 헤더를 id 로 직접 칠한다.
     #header                  → 흰 반투명 배경, padding-top:20px, z-index:98, box-shadow
     .co_header_ffffff #header → 환경설정 '헤더 색상' 에 따라 불투명 배경
   id 선택자(1,1,0)라 우리 클래스 규칙(0,1,0)보다 세다. 그대로 두면 첫 화면에서
   흰 띠가 깔리고 그 위의 흰 글씨가 묻힌다.
   id 를 떼면 rb.basic head.php 의 스크립트가 헤더를 못 찾으므로, id 는 두고
   앞에 body 를 붙여(1,2,0) 필요한 속성만 되돌린다. */
body .hj-header#header{background:transparent;padding:0;box-shadow:none;
  border-bottom:1px solid transparent;z-index:1000}
body .hj-header#header.is-solid{background:rgba(255,253,250,.97);
  border-bottom-color:var(--hj-line)}
.hj-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px}
.hj-header.is-solid .hj-nav{height:64px}
.hj-brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.hj-brand img{width:42px;height:42px;object-fit:contain;flex-shrink:0}
.hj-brand b{display:block;font-size:16px;font-weight:900;letter-spacing:-.02em;line-height:1.25}
.hj-brand em{display:block;font-style:normal;font-size:10px;letter-spacing:.13em;
  color:var(--hj-muted);font-family:Anton,sans-serif;line-height:1.4}
.hj-menu{display:flex;align-items:center;gap:2px}
.hj-menu>a{padding:9px 14px;font-size:15px;font-weight:700;color:var(--hj-ink-2);border-radius:4px}
.hj-menu>a:hover{color:var(--hj-ink);background:var(--hj-bg-soft)}
.hj-menu>a.is-on{color:var(--hj-ink)}
.hj-menu>a.is-on::after{content:"";display:block;height:2px;background:var(--hj-brass);
  margin:5px -2px -7px}
.hj-menu__auth{display:none}
.hj-util{display:flex;align-items:center;gap:8px;flex-shrink:0}
.hj-util a:not(.hj-btn){font-size:13.5px;font-weight:600;color:var(--hj-muted)}
.hj-util a:not(.hj-btn):hover{color:var(--hj-ink)}
.hj-util .hj-btn{margin-left:6px}
.hj-burger{display:none;width:42px;height:42px;border:0;background:transparent;cursor:pointer;
  padding:11px 9px;flex-direction:column;justify-content:space-between}
.hj-burger i{display:block;height:2px;background:var(--hj-ink);border-radius:1px;transition:.24s}
.hj-burger.is-open i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hj-burger.is-open i:nth-child(2){opacity:0}
.hj-burger.is-open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 히어로 위에 얹힌 상태(메인 최상단)에서는 흰 글씨 */
.hj-header.is-over:not(.is-solid) .hj-brand b,
.hj-header.is-over:not(.is-solid) .hj-menu>a,
.hj-header.is-over:not(.is-solid) .hj-util a:not(.hj-btn){color:#fff}
.hj-header.is-over:not(.is-solid) .hj-brand em{color:rgba(255,255,255,.6)}
.hj-header.is-over:not(.is-solid) .hj-menu>a:hover{background:rgba(255,255,255,.12)}
.hj-header.is-over:not(.is-solid) .hj-burger i{background:#fff}
.hj-header.is-over:not(.is-solid) .hj-btn--line{border-color:rgba(255,255,255,.34);color:#fff}

/* ---- 메인 히어로 ---------------------------------------------- */
.hj-hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:flex-end;
  background:var(--hj-dark);color:#fff;overflow:hidden;padding:150px 0 64px}
.hj-hero__bg{position:absolute;inset:0;background-size:cover;background-position:78% 45%;
  background-image:url(../rb.img/hjfc/hero.jpg)}
/* 글자가 앉는 왼쪽을 더 오래 어둡게 잡는다. 전에는 46% 에서 이미 .42 로
   옅어져서, 큰 제목 뒷부분이 엠블럼과 선수 사진 위에 그대로 얹혔다. */
.hj-hero__veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(8,14,26,.72) 0,rgba(8,14,26,.34) 34%,rgba(8,14,26,.86) 82%,var(--hj-dark) 100%),
  linear-gradient(90deg,rgba(8,14,26,.9) 0,rgba(8,14,26,.74) 40%,rgba(8,14,26,.34) 66%,transparent 88%)}
.hj-hero__in{position:relative;z-index:2;width:100%}
.hj-hero__tag{display:inline-block;font-size:13px;font-weight:700;padding:7px 14px;
  border:1px solid rgba(255,255,255,.24);border-radius:3px;margin-bottom:22px;
  color:rgba(255,255,255,.92)}
/* 사진 위에 얹히는 글자다. 가림막만으로는 밝은 데서 흐려지므로 그림자를 준다.
   line-height 를 1.14 -> 1.08 로 조인 건 두 줄이 한 덩어리로 읽히게 하려는 것이다. */
.hj-hero h1{font-size:clamp(32px,5vw,58px);line-height:1.1;margin-bottom:20px;
  max-width:15em;text-shadow:0 2px 20px rgba(8,14,26,.5);word-break:keep-all}
.hj-hero h1 em{font-style:normal;color:var(--hj-brass-l)}
.hj-hero__lead{font-size:clamp(15px,1.3vw,17px);color:rgba(255,255,255,.86);max-width:33em;
  margin-bottom:32px;text-shadow:0 1px 12px rgba(8,14,26,.55);word-break:keep-all;
  text-wrap:pretty}   /* 마지막 줄에 '봅니다.' 한 마디만 남는 걸 막는다 */
.hj-hero__btns{display:flex;gap:10px;flex-wrap:wrap}
.hj-hero__facts{display:flex;flex-wrap:wrap;gap:0 40px;margin-top:52px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.16)}
.hj-hero__facts div{padding-right:40px}
.hj-hero__facts dt{font-size:12.5px;color:rgba(255,255,255,.58);margin-bottom:5px}
.hj-hero__facts dd{margin:0;font-size:16px;font-weight:700}

/* ---- 서브 히어로 (컨테이너 안쪽 다크 패널) -------------------- */
.hj-phero{position:relative;margin-top:74px;background:var(--hj-dark);color:#fff;overflow:hidden}
.hj-phero__bg{position:absolute;inset:0;background-size:cover;background-position:70% 42%;opacity:.34;
  background-image:url(../rb.img/hjfc/hero.jpg)}
.hj-phero__veil{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,14,26,.92),rgba(8,14,26,.55) 62%,rgba(8,14,26,.3))}
/* padding 단축으로 쓰면 .hj-wrap 의 좌우 24px 이 지워진다.
   화면이 1180px 이하일 때 제목이 화면 끝에 붙어 버린다. 세로만 지정한다. */
.hj-phero__in{position:relative;z-index:2;padding-top:64px;padding-bottom:58px}
.hj-phero h1{font-size:clamp(28px,4vw,44px);margin-bottom:12px}
.hj-phero p{color:rgba(255,255,255,.76);max-width:44em;font-size:16px}
.hj-crumb{margin-top:22px;font-size:12.5px;color:rgba(255,255,255,.5)}
.hj-crumb a:hover{color:var(--hj-brass-l)}
.hj-crumb i{font-style:normal;margin:0 7px;opacity:.5}

/* ---- 카드 공통 ------------------------------------------------ */
.hj-card{background:#fff;border:1px solid var(--hj-line);border-radius:var(--hj-r);
  transition:border-color .2s,box-shadow .2s,transform .2s}
.hj-card:hover{border-color:#d6cbb6;box-shadow:var(--hj-sh);transform:translateY(-3px)}

/* ---- 코치 카드 ------------------------------------------------ */
.hj-coaches{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* 카드가 세 장이 안 될 때. 3칸 격자를 그대로 두면 오른쪽이 휑하게 빈다. */
.hj-coaches--few{grid-template-columns:repeat(auto-fit,minmax(0,300px));justify-content:center}
.hj-coach{overflow:hidden}
.hj-coach__ph{position:relative;aspect-ratio:4/5;background:var(--hj-dark-2);overflow:hidden}
.hj-coach__img{position:absolute;inset:0;background-size:cover;background-position:top center;
  transition:transform .5s var(--hj-ease)}
.hj-coach:hover .hj-coach__img{transform:scale(1.04)}
.hj-coach__ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(8,14,26,.62))}
.hj-coach__no{position:absolute;right:14px;bottom:8px;z-index:1;font-family:Anton,sans-serif;
  font-size:52px;line-height:1;color:rgba(255,255,255,.22)}
.hj-coach__tag{position:absolute;top:12px;left:12px;z-index:2;background:var(--hj-brass);
  color:#16110a;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:var(--hj-r-s)}
.hj-coach__none{position:absolute;inset:0;display:grid;place-items:center;
  font-family:Anton,sans-serif;font-size:44px;color:rgba(255,255,255,.16)}
.hj-coach__in{padding:20px}
.hj-coach__in h3,.hj-coach__in h4{font-size:19px;margin-bottom:3px}
p.hj-coach__role,.hj-coach__in .hj-coach__role{font-size:13px;font-weight:700;
  color:var(--hj-brass-ink);margin:0 0 10px}
.hj-coach__in p{font-size:14px;color:var(--hj-ink-2)}
/* 지도자 경력 연표 — 대표 소개(전체)와 코치 카드(--sm, 최근 세 줄) 양쪽에서 쓴다.
   왼쪽이 기간, 오른쪽이 소속. dl 이 아니라 ul 인 이유는 같은 기간에 두 소속이
   들어오는 일이 있어서다 — dt 하나에 dd 여럿보다 줄 단위가 다루기 쉽다. */
.hj-career{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--hj-line)}
.hj-career li{display:grid;grid-template-columns:124px 1fr;gap:16px;padding:11px 2px;
  border-bottom:1px solid var(--hj-line)}
.hj-career b{font-size:13.5px;font-weight:700;color:var(--hj-muted)}
.hj-career span{font-size:15.5px;color:var(--hj-ink-2)}
.hj-career--sm{margin-top:14px}
.hj-career--sm li{grid-template-columns:104px 1fr;gap:8px;padding:7px 0}
.hj-career--sm b{font-size:12px}
.hj-career--sm span{font-size:13px}

.hj-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:13px}
.hj-tags span{font-size:11.5px;font-weight:600;color:var(--hj-ink-2);background:var(--hj-bg-soft);
  border:1px solid var(--hj-line);border-radius:var(--hj-r-s);padding:4px 9px}

/* 대표 소개 (2단) */
.hj-lead{display:grid;grid-template-columns:340px 1fr;gap:44px;align-items:start}
.hj-lead__ph{position:relative;aspect-ratio:4/5;border-radius:var(--hj-r);overflow:hidden;
  background:var(--hj-dark-2)}
.hj-lead__img{position:absolute;inset:0;background-size:cover;background-position:top center}
.hj-lead h2{font-size:clamp(24px,2.8vw,32px);margin-bottom:4px}
.hj-lead__role{color:var(--hj-brass-ink);font-weight:700;margin-bottom:18px}
.hj-lead p{color:var(--hj-ink-2);margin-bottom:14px}
/* 소제목(지도자 프로필 / 선수 경력).
   전에는 margin:26px 0 -6px 라 아래 여백이 음수였다. 바로 밑 .hj-career 의
   윗선(border-top)이 글자에 거의 붙어서 제목이 표 위에 얹힌 것처럼 보였다.
   위는 넉넉히 떼어 앞 내용과 끊고, 아래는 자기 표와 한 덩어리로 붙인다.

   ※ 앞에 .hj 를 붙인 이유 — 위쪽의 `.hj h1,.hj h2,.hj h3,.hj h4{margin:0}` 가
     클래스 하나짜리 선택자보다 명시도가 높다. `.hj-lead__sub` 로만 적으면
     margin 이 통째로 0 으로 덮인다. 원래 있던 26px 도 실은 안 먹고 있었다.
     같은 이유로 .hj-career 의 margin 도 `.hj ul{margin:0}` 에 덮여 있었다. */
.hj .hj-lead__sub{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--hj-brass-ink);margin:44px 0 14px}
.hj .hj-lead__sub:first-child{margin-top:0}
.hj ul.hj-career{margin:22px 0 0}
.hj ul.hj-career--sm{margin:14px 0 0}
.hj .hj-lead__sub+.hj-career{margin-top:0}
/* 표 바로 뒤에 붙는 설명 한 줄도 아랫선에 닿아 있었다. */
.hj .hj-career+.hj-form__note{margin-top:14px;line-height:1.7}
.hj-quote{border-left:3px solid var(--hj-brass);padding:2px 0 2px 18px;margin:20px 0;
  font-size:17px;font-weight:700;color:var(--hj-ink)}
.hj-quote cite{display:block;font-style:normal;font-size:13px;font-weight:600;
  color:var(--hj-muted);margin-top:8px}

/* ---- 클럽 소개 2단 -------------------------------------------- */
.hj-about{display:grid;grid-template-columns:1fr 1.12fr;gap:56px;align-items:center}
.hj-about__ph{position:relative;aspect-ratio:4/5;border-radius:var(--hj-r);overflow:hidden;
  background:var(--hj-dark-2)}
.hj-about__img{position:absolute;inset:0;background-size:cover;background-position:26% 42%;
  background-image:url(../rb.img/hjfc/hero.jpg)}
.hj-about h2{font-size:clamp(26px,3.2vw,38px);margin-bottom:18px}
.hj-about p{color:var(--hj-ink-2);margin-bottom:14px}

/* ---- 사진 한 장 틀 ---------------------------------------------
   구장·차량처럼 '설명이 아니라 실물을 보여 주는' 사진에 쓴다.
   비율만 modifier 로 바꾼다. 위 .hj-about__ph 는 4:5 고정이라
   가로로 긴 사진을 넣으면 앞뒤가 잘려 무엇인지 안 보인다. */
.hj-fig{margin:0}
.hj-fig__ph{position:relative;border-radius:var(--hj-r);
  overflow:hidden;background:var(--hj-dark-2)}
.hj-fig__ph--tall{aspect-ratio:440/540}   /* 차 앞모습 */
.hj-fig__ph--sign{aspect-ratio:900/591}   /* 차 옆문 표지판 */
.hj-fig__ph--wide{aspect-ratio:1100/495}  /* 차 옆모습 전체 */
.hj-fig__img{position:absolute;inset:0;background-size:cover;background-position:center}
.hj-fig figcaption{margin-top:9px;font-size:13.5px;color:var(--hj-ink-2)}

/* 통학차량 세 장 — 세 사진의 가로세로가 다 다르다
   (앞 0.82 / 표지판 1.52 / 옆면 2.22). 같은 틀에 넣으면 차가 잘린다.
   칸 너비를 각 사진의 비율 그대로 나눠 주면 높이가 저절로 맞는다.
   사진 비율을 바꾸면 아래 fr 값도 같이 고쳐야 줄이 안 어긋난다. */
.hj-shuttle{display:grid;grid-template-columns:.82fr 1.52fr 2.22fr;gap:18px;
  align-items:start;margin-bottom:28px}

/* 지점 사진 — 지도 위에 한 단을 다 쓰는 한 장.
   max-height 로 높이를 누르면 aspect-ratio 때문에 폭까지 같이 줄어서
   사진이 왼쪽으로 쏠린다. 비율로 높이를 잡는다. */
.hj-branch__ph{margin-bottom:24px}
.hj-branch__ph .hj-fig__ph{aspect-ratio:16/9}

/* 주소로 바로 열었을 때(#shuttle) 고정 헤더에 제목이 안 가리게 */
.hj-head h2[id]{scroll-margin-top:100px}

/* ---- 숫자 세 칸 -------------------------------------------------
   대회 목록 스무 줄보다 이 세 칸이 먼저 읽힌다. 숫자를 크게 두고
   그 아래에 무슨 숫자인지, 다시 그 아래에 근거를 작게 적는다. */
.hj-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:30px}
.hj-stat{background:#fff;border:1px solid var(--hj-line);border-radius:var(--hj-r);
  padding:22px 20px 20px}
.hj-stat b{display:block;font-family:Anton,sans-serif;font-size:clamp(30px,3.6vw,42px);
  line-height:1;color:var(--hj-brass-ink);letter-spacing:.01em}
.hj-stat span{display:block;margin-top:9px;font-size:15px;font-weight:700;color:var(--hj-ink)}
.hj-stat em{display:block;margin-top:5px;font-style:normal;font-size:12.5px;
  color:var(--hj-muted);line-height:1.55}
@media (max-width:720px){
  .hj-stats{grid-template-columns:1fr;gap:10px}
  .hj-stat{padding:16px 18px 15px;display:grid;grid-template-columns:auto 1fr;
    gap:0 16px;align-items:baseline}
  .hj-stat b{font-size:30px}
  .hj-stat span{margin-top:0}
  .hj-stat em{grid-column:2}
}

/* ---- 접었다 펴는 목록 -------------------------------------------
   접혀 있어도 안의 글자는 문서에 그대로 있다. 사람 화면만 짧아지고
   검색엔진과 AI 는 다 읽는다. */
.hj-more{margin-top:20px;border-top:1px solid var(--hj-line);padding-top:6px}
.hj-more>summary{cursor:pointer;list-style:none;padding:12px 2px;
  font-size:14.5px;font-weight:700;color:var(--hj-brass-ink);
  display:flex;align-items:center;gap:8px}
.hj-more>summary::-webkit-details-marker{display:none}
.hj-more>summary::before{content:"+";display:grid;place-items:center;
  width:20px;height:20px;border-radius:50%;background:var(--hj-brass);
  color:#16110a;font-size:14px;line-height:1;flex-shrink:0}
.hj-more[open]>summary::before{content:"−"}
.hj-more>summary:hover{color:var(--hj-ink)}
.hj-more>summary:focus-visible{outline:2px solid var(--hj-brass);outline-offset:3px}

/* 근거 있는 항목만 쓰는 목록 (덕목 4칸 그리드 대체) */
.hj-facts{border-top:1px solid var(--hj-line);margin-top:28px}
.hj-facts>div{display:grid;grid-template-columns:132px 1fr;gap:20px;padding:16px 0;
  border-bottom:1px solid var(--hj-line)}
.hj-facts dt{font-size:13.5px;font-weight:700;color:var(--hj-muted)}
.hj-facts dd{margin:0;font-size:15.5px;color:var(--hj-ink-2)}
.hj-facts dd b{color:var(--hj-ink)}
/* FAQ 는 왼쪽이 '질문' 이라 라벨보다 길다 */
.hj-facts--faq>div{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:28px}
.hj-facts--faq dt{color:var(--hj-ink);font-size:15px;line-height:1.55}
.hj-facts--faq dd p{margin:0}
.hj-facts--faq dd p+p{margin-top:8px}

/* ---- 커리큘럼 ------------------------------------------------- */
.hj-steps{display:grid;gap:14px}
.hj-step{display:grid;grid-template-columns:76px 1fr;gap:26px;padding:28px 30px;
  background:#fff;border:1px solid var(--hj-line);border-radius:var(--hj-r)}
.hj-step:hover{border-color:#d6cbb6}
.hj-step__no{font-family:Anton,sans-serif;font-size:44px;line-height:1;color:var(--hj-bg-soft2)}
.hj-step h3{font-size:21px;margin-bottom:2px}
p.hj-step__age,.hj-step .hj-step__age,.hj-step4 .hj-step__age{font-size:13.5px;font-weight:700;
  color:var(--hj-brass-ink);margin:0 0 12px}
.hj-step p{color:var(--hj-ink-2);margin-bottom:14px}

/* 메인용 4칸 요약 */
.hj-steps4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.hj-step4{padding:26px 22px;background:#fff;border:1px solid var(--hj-line);
  border-radius:var(--hj-r);border-top:3px solid var(--hj-dark-2)}
.hj-step4:nth-child(2){border-top-color:var(--hj-dark-3)}
.hj-step4:nth-child(3){border-top-color:#5b513f}
.hj-step4:nth-child(4){border-top-color:var(--hj-brass-ink)}
.hj-step4:nth-child(5){border-top-color:var(--hj-brass)}
.hj-step4:nth-child(6){border-top-color:var(--hj-brass-l)}
.hj-step4 .hj-step__no{font-size:32px;margin-bottom:8px}
.hj-step4 h3,.hj-step4 h4{font-size:17.5px;margin-bottom:4px}
.hj-step4 .hj-step__age{margin-bottom:10px}
.hj-step4 p{font-size:14px;color:var(--hj-ink-2)}

/* ---- 표 ------------------------------------------------------- */
.hj-table{overflow-x:auto;border:1px solid var(--hj-line);border-radius:var(--hj-r);background:#fff}
.hj-table table{width:100%;border-collapse:collapse;min-width:560px}
.hj-table th,.hj-table td{padding:15px 20px;text-align:left;font-size:15px;
  border-bottom:1px solid var(--hj-line)}
.hj-table th{background:var(--hj-dark);color:#fff;font-size:13px;font-weight:700;
  letter-spacing:.02em;white-space:nowrap}
.hj-table td{color:var(--hj-ink-2)}
.hj-table tr:last-child td{border-bottom:0}
.hj-table tbody tr:hover td{background:var(--hj-bg-soft)}
.hj-pill{display:inline-block;font-size:12.5px;font-weight:700;padding:4px 11px;
  border-radius:var(--hj-r-s);background:var(--hj-brass-bg);color:var(--hj-brass-ink);white-space:nowrap}

/* ---- 반별 수업 시간 -------------------------------------------
   요일 x 시간 표는 휴대폰에서 여섯 칸이 되어 못 읽는다.
   학부모는 '우리 애가 몇 반인지' 로 찾으므로 반별로 묶어 카드로 놓는다. */
.hj-classes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;
  align-items:start}
.hj-class{background:#fff;border:1px solid var(--hj-line);border-radius:var(--hj-r);
  padding:22px 24px}
.hj-class h3{font-size:18px;margin-bottom:12px;display:flex;align-items:baseline;
  gap:9px;flex-wrap:wrap}
.hj-class h3 em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--hj-brass-ink);
  background:var(--hj-brass-bg);border-radius:var(--hj-r-s);padding:3px 9px}
.hj-class ul{display:grid;gap:7px}
.hj-class li{font-size:15px;color:var(--hj-ink-2);padding-left:14px;position:relative;
  line-height:1.6}
.hj-class li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--hj-brass)}

/* 요일별 시간표 (유인물과 같은 모양) */
.hj-grid-wrap{margin-top:26px;border:1px solid var(--hj-line);border-radius:var(--hj-r);
  background:#fff;overflow:hidden}
.hj-grid-wrap>summary{padding:15px 20px;cursor:pointer;font-weight:700;font-size:15px;
  list-style:none;display:flex;align-items:center;gap:8px}
.hj-grid-wrap>summary::-webkit-details-marker{display:none}
.hj-grid-wrap>summary::before{content:"▸";color:var(--hj-brass);transition:transform .2s}
.hj-grid-wrap[open]>summary::before{transform:rotate(90deg)}
.hj-grid-wrap>summary:hover{background:var(--hj-bg-soft)}
.hj-grid-scroll{margin:0 20px 20px;overflow-x:auto}
.hj-grid{width:100%;border-collapse:separate;border-spacing:3px;min-width:660px}
.hj-grid th{background:var(--hj-dark);color:#fff;font-size:13px;font-weight:700;
  padding:9px 6px;text-align:center;border-radius:5px}
.hj-grid td{background:var(--hj-bg-soft);border-radius:5px;padding:8px 7px;
  vertical-align:top;text-align:center;min-width:104px}
.hj-grid td:empty{background:transparent}
.hj-grid td b{display:block;font-size:12px;font-weight:700;color:var(--hj-ink);
  margin-bottom:2px;white-space:nowrap}
.hj-grid td span{display:block;font-size:12px;line-height:1.4;color:var(--hj-ink-2)}
/* 반 종류별로 옅게 구분한다. 유인물의 무지개색은 사이트 톤과 안 맞아 쓰지 않는다. */
.hj-grid td.is-kid{background:#f2ece0}
.hj-grid td.is-elem{background:var(--hj-bg-soft)}
.hj-grid td.is-elite{background:var(--hj-brass-bg)}
.hj-grid td.is-elite b{color:var(--hj-brass-ink)}
.hj-grid td.is-adult{background:#eceaea}
.hj-grid td.is-soon{background:transparent;border:1px dashed var(--hj-line)}
.hj-grid td.is-soon b,.hj-grid td.is-soon span{color:var(--hj-muted)}

/* 시간표 아래 운영 안내 */
.hj-notes{margin-top:26px;display:grid;gap:9px;max-width:760px}
.hj-notes li{font-size:14.5px;color:var(--hj-ink-2);padding-left:19px;position:relative}
.hj-notes li::before{content:"·";position:absolute;left:5px;top:-1px;color:var(--hj-brass);
  font-weight:900;font-size:18px}

/* 관리자가 에디터로 쓴 본문(시간표 이미지 등) */
.hj-editor img{max-width:100%;height:auto;border-radius:var(--hj-r)}
.hj-editor table{max-width:100%}
.hj-editor p{margin-bottom:10px}

/* ---- 공지 목록 ------------------------------------------------ */
.hj-notice{border-top:1px solid var(--hj-line)}
.hj-notice a{display:flex;align-items:center;gap:16px;padding:17px 4px;
  border-bottom:1px solid var(--hj-line)}
.hj-notice a:hover{background:var(--hj-bg-soft)}
.hj-notice a:hover .hj-notice__t{color:var(--hj-brass-ink)}
.hj-notice__cat{flex-shrink:0;font-size:11.5px;font-weight:700;padding:4px 10px;
  border-radius:var(--hj-r-s);background:var(--hj-bg-soft2);color:var(--hj-ink-2);min-width:52px;
  text-align:center}
.hj-notice__cat--on{background:var(--hj-brass-bg);color:var(--hj-brass-ink)}
.hj-notice__t{flex:1;font-size:15.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.hj-notice__d{flex-shrink:0;font-size:13px;color:var(--hj-muted)}
.hj-empty{padding:34px 4px;color:var(--hj-muted);font-size:15px;border-bottom:1px solid var(--hj-line)}

/* ---- 사이드(SNS) --------------------------------------------- */
.hj-side h3{font-size:17px;margin-bottom:14px}
.hj-sns{display:flex;align-items:center;gap:13px;padding:15px 17px;border:1px solid var(--hj-line);
  border-radius:var(--hj-r);margin-bottom:10px;background:#fff}
.hj-sns:hover{border-color:#d6cbb6;box-shadow:var(--hj-sh)}
.hj-sns__ic{width:42px;height:42px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;
  color:#fff}
.hj-sns__ic svg{width:22px;height:22px}
/* 인스타그램 공식 그라디언트(5단계). 전에는 주황->자주 3단계라
   실제 로고보다 붉고 탁했다. */
.hj-sns--ig .hj-sns__ic{background:
  radial-gradient(120% 120% at 28% 108%,#feda75 0%,#fa7e1e 26%,#d62976 52%,#962fbf 74%,#4f5bd5 100%)}
/* 네이버 그린 #03C75A. 블로그도 같은 브랜드라 같은 값을 쓰고,
   구분은 색이 아니라 안에 들어가는 글자/모양으로 한다. */
.hj-sns--blog .hj-sns__ic{background:#03c75a;font-weight:800;font-size:12.5px;letter-spacing:-.03em}
.hj-sns--naver .hj-sns__ic{background:#03c75a;font-weight:900;font-size:21px;line-height:1}
.hj-sns b{display:block;font-size:15px}
.hj-sns em{display:block;font-style:normal;font-size:13px;color:var(--hj-muted)}
.hj-sns__go{margin-left:auto;color:var(--hj-muted);flex-shrink:0}
.hj-sns:hover .hj-sns__go{color:var(--hj-brass-ink)}
.hj-embed{border:1px dashed var(--hj-line);border-radius:var(--hj-r);padding:16px 18px;
  background:var(--hj-bg-soft);font-size:13px;color:var(--hj-ink-2);line-height:1.7}
.hj-embed b{display:block;color:var(--hj-ink);margin-bottom:6px;font-size:13.5px}

/* ---- 인스타 릴스 ----------------------------------------------
   세로 9:16. 썸네일을 먼저 깔고 누를 때 인스타 재생기를 불러온다. */
.hj-reels{--hj-reel-h:500px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:860px){ .hj-reels{grid-template-columns:1fr;--hj-reel-h:520px} }
/* 인스타 임베드는 영상 + 계정줄 + 캡션이 한 덩어리라 세로 비율이 제각각이다.
   9:16 로 강제하면 가로 영상이 위아래로 크게 남는다. 고정 높이로 잡고 넘치는
   부분만 잘라 낸다. */
/* 카드 비율을 9:16 에서 4:5 로 낮췄다. 한 단을 셋으로 나누면 한 칸이 360px 인데
   9:16 이면 높이가 640px 이 된다. 썸네일이 없는 상태에서는 그 큰 판이 통째로
   비어 보여서, 영상 셋이 아니라 '사진이 안 뜬 자리' 셋으로 읽혔다. */
/* 재생 전(포스터)과 재생 후(인스타 임베드)의 높이를 같은 값으로 묶는다.
   전에는 4:5(457px) -> 520px 로 튀어서 누르는 순간 줄이 밀렸다. */
.hj-reel{position:relative;height:var(--hj-reel-h);border-radius:var(--hj-r);overflow:hidden;
  background:var(--hj-dark-2);border:1px solid var(--hj-line);
  box-shadow:0 6px 22px rgba(19,18,17,.09);
  transition:transform .35s var(--hj-ease),box-shadow .35s var(--hj-ease)}
.hj-reel:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(19,18,17,.16)}
.hj-reel iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.hj-reel--thumb{height:var(--hj-reel-h)}
.hj-reel__play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  background:none;cursor:pointer;display:block}
.hj-reel__play img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--hj-ease)}
.hj-reel:hover .hj-reel__play img{transform:scale(1.05)}
/* 아래쪽만 어둡게. 예전에는 판 전체에 그림자를 얹어서 더 답답했다. */
.hj-reel__play::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(8,14,26,.72) 100%)}

/* 재생 단추 — 가운데 흰 원에서 오른쪽 아래 작은 브래스 원으로 옮겼다.
   가운데 큰 원은 '영상이 로딩 중' 처럼 보인다. */
.hj-reel__badge{position:absolute;right:14px;bottom:14px;z-index:2;
  width:40px;height:40px;border-radius:50%;background:var(--hj-brass);
  display:grid;place-items:center;color:#16110a;
  box-shadow:0 4px 14px rgba(8,14,26,.35);
  transition:transform .25s var(--hj-ease)}
.hj-reel__badge svg{width:17px;height:17px;margin-left:2px}
.hj-reel:hover .hj-reel__badge{transform:scale(1.1)}

/* 카드마다 한 줄씩. 글자가 아예 없으면 깨진 화면으로 읽힌다. */
.hj-reel__meta{position:absolute;left:16px;right:62px;bottom:15px;z-index:2;
  display:block;color:#fff;text-align:left}
.hj-reel__meta b{display:block;font-size:14.5px;font-weight:700;line-height:1.4;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hj-reel__meta em{display:block;margin-top:3px;font-style:normal;
  font-size:12.5px;color:rgba(255,255,255,.66)}

.hj-reel__play:focus-visible{outline:3px solid var(--hj-brass);outline-offset:-3px}
.hj-reels__note{margin-top:14px;font-size:13px;color:var(--hj-muted)}

/* ---- 소식 블록 (릴스 + SNS 카드) ------------------------------
   릴스가 없으면 카드만 가로로 눕는다. 빈 칸이 남지 않게. */
/* 릴스 줄은 한 단을 다 쓴다.
   인스타 임베드는 최소 폭이 약 326px 이라, 옆에 다른 칸을 두고 좁히면
   영상이 잘린다. SNS 카드는 그 아래로 내린다. */
.hj-media{display:block}
/* 위 릴스 셋과 세로선이 딱 맞아야 한다. 전에는 max-width:1100px 에 gap:14px 라
   1132px / gap:18px 인 릴스 줄과 어긋나 있었다. 값을 릴스와 같게 맞춘다. */
.hj-media__sns{display:grid;grid-template-columns:repeat(3,1fr);
  gap:18px;margin-top:18px}
@media (max-width:860px){ .hj-media__sns{grid-template-columns:1fr} }
.hj-media--nofeed .hj-media__sns{margin-top:0}
.hj-media__hint{grid-column:1/-1;margin-top:2px;font-size:13px;
  color:var(--hj-muted);line-height:1.7}

/* ---- 훈련 사진 ------------------------------------------------ */
.hj-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hj-photo{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--hj-r);
  overflow:hidden;background:var(--hj-bg-soft2)}
.hj-photo img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--hj-ease)}
.hj-photo:hover img{transform:scale(1.05)}
.hj-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 52%,rgba(19,18,17,.72))}
.hj-photo span{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;color:#fff;
  font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- 지점 ------------------------------------------------------ */
.hj-branch--next{margin-top:64px;padding-top:56px;border-top:1px solid var(--hj-line)}

/* ---- 오시는 길 ------------------------------------------------ */
.hj-loc{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:start}
.hj-map{border:1px solid var(--hj-line);border-radius:var(--hj-r);overflow:hidden;
  background:var(--hj-bg-soft);min-height:380px;display:grid;place-items:center}
.hj-map iframe{width:100%;height:100%;min-height:380px;border:0;display:block}
.hj-map__ph{text-align:center;color:var(--hj-muted);font-size:14px;padding:28px;line-height:1.7}
.hj-info{border-top:1px solid var(--hj-line)}
.hj-info>div{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:17px 0;
  border-bottom:1px solid var(--hj-line)}
.hj-info dt{font-size:13.5px;font-weight:700;color:var(--hj-muted)}
.hj-info dd{margin:0;font-size:16px;font-weight:600;color:var(--hj-ink)}
.hj-info dd small{display:block;font-size:13.5px;font-weight:400;color:var(--hj-ink-2);margin-top:3px}

/* ---- 신청 폼 -------------------------------------------------- */
.hj-form{display:grid;gap:18px;max-width:680px}
.hj-form label{display:block;font-size:14px;font-weight:700;margin-bottom:7px}
.hj-form label i{font-style:normal;color:#c0392b;margin-left:3px}
.hj-form input[type=text],.hj-form input[type=tel],.hj-form input[type=email],
.hj-form select,.hj-form textarea{width:100%;padding:12px 14px;border:1px solid var(--hj-line);
  border-radius:5px;font-family:inherit;font-size:15px;color:var(--hj-ink);background:#fff}
.hj-form input:focus,.hj-form select:focus,.hj-form textarea:focus{outline:0;
  border-color:var(--hj-brass);box-shadow:0 0 0 3px rgba(180,131,43,.16)}
.hj-form textarea{min-height:130px;resize:vertical;line-height:1.7}
.hj-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hj-form__agree{border:1px solid var(--hj-line);border-radius:var(--hj-r);padding:16px 18px;
  background:var(--hj-bg-soft);font-size:13.5px;color:var(--hj-ink-2);line-height:1.7}
.hj-form__agree label{display:flex;align-items:flex-start;gap:8px;font-weight:600;
  font-size:14px;color:var(--hj-ink);margin:12px 0 0}
.hj-form__agree input[type=checkbox]{margin-top:4px;flex-shrink:0}
.hj-form__note{font-size:13px;color:var(--hj-muted)}

/* ---- 하단 배너 ------------------------------------------------ */
.hj-cta{background:var(--hj-dark-2);color:#fff;border-radius:var(--hj-r);padding:52px 44px;
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.hj-cta h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:8px}
.hj-cta p{color:rgba(255,255,255,.74);font-size:15.5px}
.hj-cta__btns{display:flex;gap:10px;flex-wrap:wrap}

/* ---- 푸터 ----------------------------------------------------- */
#hj-footer{background:var(--hj-dark);color:#fff;padding:62px 0 28px;
  border-top:3px solid var(--hj-brass)}
.hj-foot{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:36px;padding-bottom:38px}
.hj-foot__brand{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.hj-foot__brand img{width:44px;height:44px;object-fit:contain}
.hj-foot__brand b{font-size:17px;font-weight:900}
.hj-foot p{font-size:13.5px;color:rgba(255,255,255,.56);line-height:1.75;max-width:30em}
.hj-foot h5{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--hj-brass-l);
  margin:0 0 13px;font-weight:700}
.hj-foot a{display:block;font-size:13.5px;color:rgba(255,255,255,.6);padding:5px 0}
.hj-foot a:hover{color:#fff}
.hj-foot__biz{padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.hj-foot__biz p{font-size:12.5px;color:rgba(255,255,255,.42);max-width:none}
.hj-foot__biz p+p{margin-top:5px}
.hj-foot__sns{display:flex;gap:8px}
.hj-foot__sns a{width:38px;height:38px;border:1px solid rgba(255,255,255,.16);border-radius:7px;
  display:grid;place-items:center;padding:0;color:rgba(255,255,255,.7)}
.hj-foot__sns a:hover{background:rgba(255,255,255,.1);color:#fff}
.hj-foot__sns svg{width:18px;height:18px}

/* ---- 회원 화면 ------------------------------------------------
   그누보드 기본 회원 스킨(rb.member)을 그대로 두고 색과 모서리만 맞춘다.
   스킨 파일을 복사해 고치면 리빌더가 올라갈 때 충돌한다. */
/* 로그인·회원가입 화면은 테마 헤더를 거치지 않는다.
   extend/hjfc.extend.php 가 이 파일을 챙겨 붙여 준다. */

/* 엠블럼이 너무 작게 나온다. 이 화면에서는 로고가 유일한 브랜드 신호다. */
.rb_login_logo img,.rb_login_logo #logo_img{width:260px!important;height:auto!important;
  max-width:70%!important;margin:0 auto}
.rb_login_logo{padding:10px 0 22px}

.rb_member,.rb_login,#register_form,.mbskin{
  font-family:'Pretendard HJ',Pretendard,-apple-system,'Malgun Gothic',sans-serif}
.rb_login_box{border-radius:var(--hj-r)!important;border-color:var(--hj-line)!important}
.rb_login_box .input,
.mbskin input[type=text],.mbskin input[type=password],.mbskin input[type=email],
.register_form_inner input[type=text],.register_form_inner input[type=password],
.register_form_inner input[type=email],.register_form_inner input[type=tel]{
  border-radius:5px!important}
.rb_login_box .input:focus,.mbskin input:focus,.register_form_inner input:focus{
  border-color:var(--hj-brass)!important;box-shadow:0 0 0 3px rgba(180,131,43,.16)!important}
/* 리빌더는 포인트 컬러를 조상 클래스(.co_aa20ff 처럼 색 코드가 붙은 클래스)로 뿌린다.
     .co_aa20ff .btn_submit { background-color: ... !important }
   조상이 하나 더 붙어 있어 우리 단일 클래스 규칙보다 세다.
   같은 모양으로 맞춰 준다 — 특이도가 같으면 나중에 실린 이 파일이 이긴다.
   ※ 정석은 환경설정에서 포인트 컬러 자체를 바꾸는 것이다. 이건 그 전까지의 대비다. */
.btn_submit,
[class*="co_"] .btn_submit,
.mbskin .btn_submit,
.register .btn_confirm .btn_submit,
#fregister .btn_submit{
  background:var(--hj-ink)!important;border-color:var(--hj-ink)!important;color:#fff!important;
  border-radius:5px!important}
.btn_submit:hover,
[class*="co_"] .btn_submit:hover{background:var(--hj-dark-3)!important}
.btn_close,.register .btn_confirm .btn_close{border-radius:5px!important}
.rb_login a:hover,.join_links a{color:var(--hj-brass-ink)}
/* 아이디·비밀번호 찾기 같은 링크도 포인트 컬러를 탄다 */
.rb_member a,[class*="co_"] .rb_member a,
.login_if_lpl a,[class*="co_"] .login_if_lpl a{color:var(--hj-brass-ink)}
.rb_member a:hover,[class*="co_"] .rb_member a:hover{color:var(--hj-ink)}
.fregister_agree input[type=checkbox]:checked+label span{
  background-color:var(--hj-brass)!important;border-color:var(--hj-brass)!important}
/* 로그인 스킨이 body 배경을 회색으로 덮어써서 푸터까지 회색이 된다 */
.rb_login{background:transparent}

/* 우리가 직접 만든 회원 관련 화면이 있을 때 쓰는 틀 */
.hj-auth{max-width:420px;margin:0 auto;padding:56px 0 90px}
.hj-auth--wide{max-width:760px}
.hj-auth__head{text-align:center;margin-bottom:30px}
.hj-auth__head h2{font-size:26px;margin-bottom:8px}
.hj-auth__head p{font-size:14.5px;color:var(--hj-ink-2)}

/* ---- 게시판·회원 화면 머리글 ---------------------------------
   게시판만 머리글 없이 덩그러니 시작하면 딴 사이트처럼 보인다.
   우리 페이지와 같은 판을 붙이되 조금 낮게. */
.hj-phero--board .hj-phero__in{padding-top:46px;padding-bottom:42px}
.hj-phero--board h1{font-size:clamp(24px,3.2vw,34px)}
body:has(.hj-phero--board) .contents_wrap>.sub{padding-top:44px}
body:has(.hj-phero--board) #container_title{display:none}

/* ---- 리빌더 포인트 컬러 덮기 ----------------------------------
   리빌더는 환경설정의 포인트 컬러를 set.color.php 로 만들어 뿌린다.
   선택자가 전부 `.co_아무개 …` 꼴이라 우리 단일 클래스 규칙보다 세다.
   같은 모양(`[class*="co_"] …`)으로 맞추고, 저쪽이 !important 를 쓴 곳이 있어
   이쪽도 !important 를 쓴다. 우리 파일이 뒤에 실리므로 동점이면 이긴다.

   ※ 정석은 관리자 > 리빌더 환경설정에서 포인트 컬러를 #96691b 로 바꾸는 것이다.
     그러면 이 블록이 없어도 된다. 아래는 그 전까지, 그리고 설정이 되돌려졌을 때의 대비다. */

/* 면(배경) — 황동. 흰 글씨와 대비가 나오게 진한 쪽을 쓴다 */
.main_color_bg,
[class*="co_"] .main_color_bg,
[class*="co_"] .top1_bg,
[class*="co_"] .btn_round.btn_round_bg,
[class*="co_"] .rb_bbs_wrap .btns_gr_wrap .btns_gr .fl_btns.main_color_bg,
[class*="co_"] .rb_bbs_wrap .btm_btns .fl_btns.main_color_bg,
[class*="co_"] .rb_bbs_wrap .writer_prof_ul2 .gd_btn,
[class*="co_"] .rb_prof .rb_prof_btn .fl_btns,
[class*="co_"] .new_win .win_ul .selected,
[class*="co_"] .reply_btn,
[class*="co_"] .memo_list .no_read,
[class*="co_"] .add_qa,
[class*="co_"] .rb_status_bt.active,
[class*="co_"] .pg_current,
[class*="co_"] #point .point_all,
[class*="co_"] .cc_total_cnt,
[class*="co_"] .main_rb_bg,
[class*="co_"] .rb_range_item .ui-slider-handle,
[class*="co_"] .rb_range_item .ui-slider-range,
[class*="co_"] .gnb_wrap .snb_wrap .qm_wrap button span,
[class*="co_"] .gnb_wrap .snb_wrap .qm_wrap a span{
  background-color:var(--hj-brass-d)!important;border-color:var(--hj-brass-d)!important}

/* 버튼은 조금 더 진하게 — 흰 글씨가 얹힌다 */
.btn_submit,
[class*="co_"] .btn_submit,
.mbskin .btn_submit,
.register .btn_confirm .btn_submit,
#fregister .btn_submit{
  background:var(--hj-ink)!important;background-color:var(--hj-ink)!important;
  border-color:var(--hj-ink)!important;color:#fff!important;border-radius:5px!important}
.btn_submit:hover,
[class*="co_"] .btn_submit:hover{background:var(--hj-dark-3)!important;
  background-color:var(--hj-dark-3)!important}
[class*="co_"] .main_color_bg:hover{background-color:var(--hj-brass)!important}

/* 글자색 — 밝은 바탕 위라 어두운 황동 */
.main_color,
[class*="co_"] .main_color,
[class*="co_"] .main_rb_color,
[class*="co_"] .sch_word,
[class*="co_"] .bbs_list_label2.label_w3,
[class*="co_"] .rb_bbs_wrap #bo_cate #bo_cate_on,
[class*="co_"] .rb_faq #bo_cate #bo_cate_on,
[class*="co_"] .rb_faq #faq_con .con_inner .closer_btn,
[class*="co_"] .rb_serch_skin #bo_cate .sch_on,
[class*="co_"] .gnb_wrap nav a:hover,
[class*="co_"] .gnb_wrap .snb_wrap .member_info_wrap a span,
[class*="co_"] .cbp-hrmenu > ul > li.cbp-hropen a,
[class*="co_"] .cbp-hrmenu > ul > li.cbp-hropen > a:hover,
[class*="co_"] #search_box_wrap .ser_ul_pd .ser_label b,
[class*="co_"] #search_box_wrap ul input.w100{
  color:var(--hj-brass-ink)!important}

/* 테두리 — 주로 hover 상태 */
[class*="co_"] .main_rb_bordercolor,
[class*="co_"] .rb_bbs_wrap .btns_gr_wrap .btns_gr .fl_btns:hover,
[class*="co_"] .rb_bbs_wrap .writer_prof_ul2 .fl_btns:hover,
[class*="co_"] .rb_faq .btns_gr_wrap .btns_gr .fl_btns:hover,
[class*="co_"] #current_connect .cc_flex .fl_btns:hover{
  border-color:var(--hj-brass)!important}

[class*="co_"] .rb_bbs_wrap .btm_btns .fl_btns:hover,
[class*="co_"] .rb_faq .faq_ser_wrap input,
[class*="co_"] .rb_serch_skin .faq_ser_wrap input{
  border-color:var(--hj-brass)!important;color:var(--hj-brass-ink)!important}

/* 아이콘·로딩 표시기 */
[class*="co_"] #search_top_btn.ser_open svg path{fill:var(--hj-brass-ink)!important}
#loadings_spin,
[class*="co_"] #loadings_spin{border-top-color:var(--hj-brass)!important}

/* ---- 게시판 ---------------------------------------------------
   기본 게시판 스킨에 사이트 색만 얹는다. 구조는 건드리지 않는다. */

/* 목록 표 */
.rb-board-table{border-collapse:collapse}
.rb-board-table thead th{background:var(--hj-dark);color:#fff;font-weight:700;
  font-size:13px;border:0;letter-spacing:.02em}
.rb-board-table tbody td{border-bottom:1px solid var(--hj-line)}
.rb-board-table tbody tr:hover td{background:var(--hj-bg-soft)}
.rb-board-title a:hover{color:var(--hj-brass-ink)}

/* 떠 있는 검색·글등록 단추가 머리글을 침범하지 않게 아래로 내린다 */
body:has(.hj-phero--board) .btns_gr_wrap{top:300px}

/* '포인트정책' 단추를 감춘다.
   훈련 사진 게시판에만 뜨고 공지·체험신청에는 안 뜬다. 게시판마다
   포인트 설정이 달라서 생긴 차이인데, 떠 있는 검색 단추와 겹쳐서
   두 개가 포개진 채로 보인다. 이 클럽은 포인트를 쓰지 않는다.
   ※ 근본 해결은 관리자 > 게시판 관리에서 그 게시판의 포인트를
     다른 게시판과 같이 0 으로 맞추는 것이다. 여기서는 화면만 정리한다. */
.point_info_btns_wrap{display:none}

/* 버튼 */
.fl_btns{border-radius:5px!important}
.btn_bo_sch{border-radius:5px!important}

/* 갤러리 카드 */
.gallery-item-img{border-radius:var(--hj-r);overflow:hidden}
.gallery-item-img img{transition:transform .5s var(--hj-ease)}
.gallery-item-con:hover .gallery-item-img img{transform:scale(1.05)}
.gallery-item-tit{font-weight:700;letter-spacing:-.02em}

#bo_list .btn_b01,#bo_list .btn_b02,#bo_v .btn_b01,#bo_w .btn_submit,
.btn_b01,.btn_b02{border-radius:5px}
#bo_list .btn_b02,.btn_b02{background:var(--hj-ink);border-color:var(--hj-ink);color:#fff}
#bo_list_total,.pg_current{background:var(--hj-ink)!important;border-color:var(--hj-ink)!important}

/* ---- 하단 고정 문의 바 (좁은 화면 전용) ------------------------
   넓은 화면에서는 헤더의 체험 신청 버튼이 늘 보이므로 필요 없다. */
.hj-bar{display:none}
@media(max-width:900px){
  .hj-bar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:900;
    background:rgba(255,253,250,.97);border-top:1px solid var(--hj-line);
    box-shadow:0 -2px 14px rgba(30,22,8,.08);
    padding-bottom:env(safe-area-inset-bottom)}
  .hj-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:9px 6px 8px;font-size:12px;font-weight:700;color:var(--hj-ink-2);
    min-height:56px}
  .hj-bar a+a{border-left:1px solid var(--hj-line)}
  .hj-bar a svg{width:20px;height:20px}
  .hj-bar a.is-primary{background:var(--hj-brass);color:#16110a;border-left-color:var(--hj-brass)}
  .hj-bar a:active{background:var(--hj-bg-soft2)}
  .hj-bar a.is-primary:active{background:var(--hj-brass-d)}
  /* 바가 푸터 끝을 가리지 않게 */
  #hj-footer{padding-bottom:calc(28px + 60px)}
  /* 서랍 메뉴가 열려 있을 때는 숨긴다 */
  .hj-menu-open .hj-bar{display:none}
}

/* ---- 약관 · 개인정보처리방침 ----------------------------------- */
.hj-legal{max-width:820px}
.hj-legal h2{font-size:19px;margin:38px 0 12px;padding-top:4px}
.hj-legal h2:first-child{margin-top:0}
.hj-legal h3{font-size:15.5px;margin:20px 0 8px;color:var(--hj-brass-ink)}
.hj-legal p{color:var(--hj-ink-2);margin-bottom:12px;line-height:1.8}
.hj-legal ul,.hj-legal ol{margin:0 0 14px;padding-left:2px}
.hj-legal li{color:var(--hj-ink-2);line-height:1.8;padding-left:16px;position:relative;
  margin-bottom:5px}
.hj-legal ul>li::before{content:"·";position:absolute;left:3px;color:var(--hj-brass);
  font-weight:900}
.hj-legal ol{counter-reset:hjol}
.hj-legal ol>li{counter-increment:hjol;padding-left:24px}
.hj-legal ol>li::before{content:counter(hjol) ".";position:absolute;left:0;
  color:var(--hj-brass-ink);font-weight:700;font-size:14px}
.hj-legal ol>li ul{margin-top:6px}
.hj-legal hr{border:0;border-top:1px solid var(--hj-line);margin:38px 0}
.hj-legal__date{font-size:14px;color:var(--hj-muted)}
.hj-legal b{color:var(--hj-ink)}

/* ---- 나타남 효과 (은근하게) ----------------------------------- */
/* 자바스크립트가 떠 있을 때만 숨겼다가 보여 준다.
   스크립트가 404 나거나 오류로 멈추면 .hj-js 가 안 붙어서 그냥 다 보인다.
   (예전에는 opacity:0 이 기본이라 스크립트가 죽으면 본문이 통째로 사라졌다) */
.hj-rv{transition:opacity .5s var(--hj-ease),transform .5s var(--hj-ease)}
.hj-js .hj-rv{opacity:0;transform:translateY(16px)}
.hj-js .hj-rv.is-in{opacity:1;transform:none}
.hj-rv[data-d="1"]{transition-delay:.07s}
.hj-rv[data-d="2"]{transition-delay:.14s}
.hj-rv[data-d="3"]{transition-delay:.21s}

/* ---- 반응형 --------------------------------------------------- */
@media(max-width:1080px){
  .hj-menu>a{padding:9px 10px;font-size:14px}
  .hj-lead{grid-template-columns:260px 1fr;gap:32px}
}
@media(max-width:1080px){
  .hj-reel{height:460px}
}
@media(max-width:900px){
  /* 좁은 화면에서는 옆으로 넘겨 본다.
     인스타 임베드가 326px 아래로 좁아지면 영상이 잘리므로 단을 나누지 않는다. */
  .hj-reels{display:grid;grid-auto-flow:column;grid-template-columns:none;
    grid-auto-columns:min(90vw,340px);gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;margin-right:-24px;padding-right:24px}
  .hj-reel{scroll-snap-align:start;height:480px}
  .hj-reels::-webkit-scrollbar{height:4px}
  .hj-reels::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:2px}
  .hj-media__sns{grid-template-columns:1fr;margin-top:20px}
}
@media(max-width:900px){
  /* 좁은 화면에 1672px 짜리 원본을 내려보낼 이유가 없다.
     900px 판으로 바꿔서 첫 화면 로딩을 줄인다(320KB -> 107KB). */
  .hj-hero__bg,.hj-phero__bg,.hj-about__img{background-image:url(../rb.img/hjfc/hero-sm.jpg)}
  .hj-sec{padding:66px 0}.hj-sec--wide{padding:80px 0}.hj-sec--tight{padding:52px 0}
  .hj-coaches{grid-template-columns:repeat(2,1fr)}
  .hj-steps4{grid-template-columns:repeat(2,1fr)}
  .hj-about,.hj-loc,.hj-lead{grid-template-columns:1fr;gap:32px}
  .hj-shuttle{grid-template-columns:1fr;gap:14px}
  .hj-photos{grid-template-columns:repeat(2,1fr);gap:10px}
  .hj-lead__ph,.hj-about__ph{max-width:320px}
  .hj-cta{flex-direction:column;align-items:flex-start;padding:36px 26px}
  .hj-foot{grid-template-columns:1fr 1fr;gap:28px}
  .hj-burger{display:flex}
  .hj-util a:not(.hj-btn){display:none}
  /* 좁은 화면에서는 아래 고정 바가 같은 일을 한다. 헤더에서는 빼고
     브랜드 이름에 자리를 준다. */
  .hj-util .hj-btn{display:none}
  .hj-menu{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);flex-direction:column;
    align-items:stretch;gap:2px;background:var(--hj-dark);padding:88px 18px 24px;
    transform:translateX(102%);transition:transform .3s var(--hj-ease);overflow-y:auto}
  .hj-menu.is-open{transform:none}
  .hj-menu>a{color:rgba(255,255,255,.86)!important;font-size:16px;padding:14px 14px;
    border-radius:6px}
  .hj-menu>a:hover,.hj-menu>a.is-on{background:rgba(255,255,255,.09);color:#fff!important}
  .hj-menu>a.is-on::after{display:none}
  .hj-menu__auth{display:block;margin-top:14px;padding-top:14px;
    border-top:1px solid rgba(255,255,255,.14)}
  .hj-menu__auth a{display:block;padding:13px 14px;border-radius:6px;font-size:15px;
    font-weight:600;color:rgba(255,255,255,.66)}
  .hj-menu__auth a:hover{background:rgba(255,255,255,.09);color:#fff}
  .hj-hero{min-height:0;padding:124px 0 54px}
  .hj-hero__facts{gap:0 26px;margin-top:36px}
  .hj-hero__facts div{padding-right:26px}
  .hj-phero{margin-top:64px}
  .hj-phero__in{padding-top:46px;padding-bottom:42px}
  .hj-step{grid-template-columns:1fr;gap:8px;padding:24px 22px}
  .hj-step__no{font-size:32px}
  .hj-form__row{grid-template-columns:1fr}
}
@media(max-width:560px){
  .hj-coaches{grid-template-columns:1fr}
  .hj-steps4{grid-template-columns:1fr}
  .hj-foot{grid-template-columns:1fr}
  .hj-facts>div,.hj-info>div,.hj-facts--faq>div{grid-template-columns:1fr;gap:4px}
  .hj-career li{grid-template-columns:1fr;gap:2px}
  .hj-notice a{flex-wrap:wrap;gap:8px 12px}
  .hj-notice__t{flex-basis:100%;order:3;white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  .hj-js .hj-rv{opacity:1;transform:none;transition:none}
  .hj *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ==== 갤러리 게시판 (rb.gallery_bbs 스킨 다듬기) ==================
   원본 스킨 파일은 건드리지 않고 여기서 덮어쓴다.

   1) 사진을 정사각형으로.
      스킨의 style.php 가 `.gallery-item-img img { height: 720px }` 처럼
      고정 높이를 박아 넣는다. 칸 너비는 화면에 따라 변하는데 높이만 고정이라
      사진이 늘어나거나 뭉개진다. 비율로 바꾼다.
      스킨 CSS 가 나중에 붙을 수 있어 !important 를 쓴다.

   2) 카드를 사이트의 다른 카드들과 같은 결로.
      테두리·모서리·여백·글꼴 크기를 hj-* 컴포넌트에 맞춘다.
   ================================================================== */

.gallery-item-img{position:relative;margin:0;padding:0;list-style:none;
  border-radius:14px;overflow:hidden;background:var(--hj-bg-soft);
  border:1px solid var(--hj-line)}
.gallery-item-img>a{display:block;line-height:0}

.gallery-item-img img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:1/1;          /* 가로 세로 1대1 */
  object-fit:cover;
  border-radius:0!important;
  display:block;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}

/* 마우스를 올리면 살짝 당겨진다. 손가락으로 쓰는 화면에서는 뺀다. */
@media (hover:hover){
  .gallery_v_mtop:hover .gallery-item-img img{transform:scale(1.045)}
  .gallery_v_mtop:hover .gallery-item-img{border-color:#d6cbb6}
}

/* 새글·인기 딱지 */
.gallery-item-ico{top:10px;right:10px;z-index:2}
.gallery-item-ico .bbs_list_label{border-radius:999px;padding:4px 9px 3px;
  font-size:11px;font-weight:700;letter-spacing:.02em}

/* 카드 안쪽 글자 — 사이트의 다른 목록과 같은 크기·색으로 */
.gallery_v_mtop{margin-bottom:34px}
.gallery-item-tit{margin-top:14px;font-size:16px;line-height:1.45}
.gallery-item-tit a{color:var(--hj-ink);font-weight:700}
.gallery-item-tit a:hover{color:var(--hj-brass-ink)}
.gallery-item-con{margin-top:7px}
.gallery-item-con a{font-size:13.5px;color:var(--hj-ink-2);line-height:1.6}
.gallery-item-info{margin-top:10px;font-size:12.5px;color:var(--hj-muted)}
.gallery-item-info-sub{margin-top:6px}

/* 글이 하나도 없을 때 — "데이터가 없습니다." 가 덩그러니 남지 않게 */
.skin_list_image .no_data{padding:56px 20px!important;color:var(--hj-muted);
  border:1px dashed var(--hj-line);border-radius:14px;margin-top:8px}

@media (max-width:1024px){
  .gallery_v_mtop{margin-bottom:26px}
  .gallery-item-tit{margin-top:12px;font-size:15px}
}

/* 릴스 썸네일이 아직 없을 때 깔아 두는 판.
   인스타에서 그림을 받아 오지 않고 우리 엠블럼만 쓴다.
   (누르기 전에는 인스타로 아무 요청도 나가지 않는다) */
/* 엠블럼을 92px 로 가운데 크게 박아 두니 '로고만 있는 빈 판' 이 됐다.
   클럽 남색 그라디언트를 깔고 엠블럼은 크게·흐리게 뒤로 물린다. 무늬로 읽히게. */
.hj-reel__poster{position:absolute;inset:0;display:block;
  background:
    radial-gradient(120% 90% at 30% 12%,rgba(255,255,255,.10),transparent 62%),
    linear-gradient(155deg,#1b2a4a 0%,var(--hj-dark) 58%,#0a1220 100%)}
.hj-reel__poster::after{content:"";position:absolute;inset:0;
  background:url(../rb.img/hjfc/crest.png) center 38% / 190px auto no-repeat;
  opacity:.13;transition:opacity .4s var(--hj-ease),transform .6s var(--hj-ease)}
.hj-reel:hover .hj-reel__poster::after{opacity:.2;transform:scale(1.04)}
/* 셋이 똑같은 판이면 타일을 복사해 붙인 것처럼 보인다. 각도만 조금씩 달리한다.
   (자동 연동을 켜면 진짜 썸네일이 들어와서 이 규칙은 안 보이게 된다) */
.hj-reel:nth-child(2) .hj-reel__poster{background:
  radial-gradient(120% 90% at 68% 16%,rgba(255,255,255,.09),transparent 60%),
  linear-gradient(200deg,#1b2a4a 0%,var(--hj-dark) 55%,#0a1220 100%)}
.hj-reel:nth-child(3) .hj-reel__poster{background:
  radial-gradient(130% 95% at 45% 8%,rgba(255,255,255,.11),transparent 64%),
  linear-gradient(125deg,#22355c 0%,var(--hj-dark) 60%,#0a1220 100%)}
.hj-reel:nth-child(2) .hj-reel__poster::after{background-position:center 42%}
.hj-reel:nth-child(3) .hj-reel__poster::after{background-position:center 35%}

/* 히어로 h1 첫 줄 — 원래 h1 위에 따로 떠 있던 안내 문구를 h1 안으로 옮겼다.
   제목표시줄과 h1 이 같은 말을 하게 하려는 것이고, 보이는 모습은 전과 같다. */
/* 칸은 제목 '위' 에 따로 선다. 전에는 inline-block 이라 제목과 같은 줄에
   붙었고, 그 바람에 제목이 밀려서 '유소년 / 부터 성인까지' 처럼 단어 가운데가
   잘렸다. flex 한 줄로 빼서 제목 줄에 영향을 주지 않게 한다. */
.hj-hero__kws{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.hj-hero__kw{font-size:13px;font-weight:700;padding:7px 14px;
  border-radius:999px;background:rgba(255,255,255,.16);
  color:#fff;letter-spacing:.01em;line-height:1.5;
  font-family:inherit;white-space:nowrap;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* 두 번째 칸은 테두리만. 같은 알약이 둘 붙어 있으면 한 덩어리로 읽혀서
   무슨 말인지 안 들어온다. 앞은 '어디', 뒤는 '누구를' 이라 다른 정보다. */
.hj-hero__kw--alt{background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38)}

/* 제목 두 줄을 각각 블록으로. <br> 로 끊으면 화면 폭에 따라 엉뚱한 데서
   한 번 더 접힌다. 줄 단위로 잡아 두면 어느 폭에서도 문장이 안 쪼개진다. */
.hj-hero__l1,.hj-hero h1 em{display:block}
.hj-hero h1 .hj-hero__kws{display:flex}   /* 위 블록 규칙에 안 먹히게 */

@media (max-width:720px){
  .hj-hero__kws{gap:6px;margin-bottom:14px}
  .hj-hero__kw{font-size:11.5px;padding:6px 11px}
}

/* ---- 자주 묻는 질문 -------------------------------------------
   보이는 모습은 예전 hj-facts--faq 와 같게 두고, 속만 dt/dd 에서
   h3/p 로 바꿨다. 검색과 AI 답변이 '제목으로 적힌 질문' 을 찾기 때문이다. */
.hj-qa{border-top:1px solid var(--hj-line);margin-top:28px}
.hj-qa__item{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:28px;
  padding:16px 0;border-bottom:1px solid var(--hj-line);
  scroll-margin-top:100px}   /* 주소로 바로 열었을 때 헤더에 안 가리게 */
.hj-qa__q{font-size:15px;font-weight:700;line-height:1.55;color:var(--hj-ink);margin:0}
.hj-qa__a{font-size:15.5px;color:var(--hj-ink-2);line-height:1.7;margin:0}
.hj-qa__item:target{background:var(--hj-bg-soft)}
@media (max-width:720px){
  .hj-qa__item{grid-template-columns:1fr;gap:6px}
}

/* ---- 페이지 맨 아래 정보 --------------------------------------
   언제 고쳤는지와 이어 볼 페이지. 조용히 두되 찾으면 보이게. */
.hj-pagefoot{border-top:1px solid var(--hj-line);padding-top:18px;
  display:flex;flex-wrap:wrap;gap:12px 22px;align-items:baseline;justify-content:space-between}
.hj-pagefoot__links{font-size:14px;color:var(--hj-muted)}
.hj-pagefoot__links b{font-weight:700;color:var(--hj-ink-2);margin-right:8px}
.hj-pagefoot__links a{color:var(--hj-brass-ink);text-decoration:underline;
  text-underline-offset:3px;margin-right:14px}
.hj-pagefoot__links a:hover{color:var(--hj-brass-d)}
.hj-pagefoot__date{font-size:13px;color:var(--hj-muted);margin:0}
@media (max-width:720px){ .hj-pagefoot{display:block} .hj-pagefoot__date{margin-top:10px} }
/* 페이지 하단 정보는 앞 섹션에 바짝 붙인다 (빈 공간이 크게 남지 않게) */
.hj-sec--foot{padding-top:0;padding-bottom:34px}

/* ---- 페이지 맨 위 요약 ----------------------------------------
   결론부터 보고 싶은 분과, 답을 뽑아 가는 검색·AI 를 함께 겨냥한다. */
.hj-sec--lead{padding:34px 0 0}
.hj-tldr{display:grid;grid-template-columns:88px 1fr;gap:18px;align-items:start;
  background:var(--hj-bg-soft);border:1px solid var(--hj-line);
  border-left:3px solid var(--hj-brass);border-radius:12px;padding:20px 22px}
.hj-tldr>b{font-size:13px;font-weight:800;color:var(--hj-brass-ink);letter-spacing:.02em;
  padding-top:2px}
.hj-tldr ul{margin:0;padding:0;list-style:none}
.hj-tldr li{position:relative;padding-left:15px;margin-bottom:6px;
  font-size:15px;line-height:1.7;color:var(--hj-ink-2)}
.hj-tldr li:last-child{margin-bottom:0}
.hj-tldr li::before{content:"";position:absolute;left:0;top:.72em;
  width:5px;height:5px;border-radius:50%;background:var(--hj-brass)}
.hj-tldr li b{color:var(--hj-ink)}
@media (max-width:720px){
  .hj-tldr{grid-template-columns:1fr;gap:10px;padding:18px}
}
/* 참고한 곳 — 페이지 하단, 조용하게 */
.hj-pagefoot__ref{margin:14px 0 0;font-size:12.5px;color:var(--hj-muted)}
.hj-pagefoot__ref b{font-weight:700;color:var(--hj-ink-2);margin-right:8px}
.hj-pagefoot__ref a{color:var(--hj-muted);text-decoration:underline;
  text-underline-offset:3px;margin-right:12px}
.hj-pagefoot__ref a:hover{color:var(--hj-brass-ink)}
/* 구장별로 아쉬운 점 한 줄. 감추지는 않되 장점과 같은 무게로 읽히지 않게 조금 낮춘다. */
.hj-class li.is-note{color:var(--hj-muted);font-size:14px}
.hj-class li.is-note::before{background:var(--hj-line)}