@charset "utf-8";
/* 자필후기·한마디에 쓰는 손글씨. 성범죄센터는 머리말에서 부르지만
   학폭센터 머리말에는 이 폰트가 없어 여기서 부른다.
   @import 는 다른 규칙보다 앞에 있어야 먹는다. */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
/* ============================================================
   megax-boards.css 보정 — 항상 megax-boards.css 뒤에 읽힌다.
   ============================================================ */

/* ── 성범죄센터 원본의 :root 토큰 되살림 ──
   megax.css 를 .mxsx 안쪽으로 감쌀 때 :root 블록이 통째로 빠졌다.
   그 결과 --w 가 없어 .mx-wrap 의 max-width 가 죽고, 게시판 화면이
   좌우 여백 없이 브라우저 끝까지 퍼졌다. 색 토큰도 전부 비어 있었다.
   원본 megax.css 7~21행 값 그대로 .mxsx 에 건다.
   메인(.mxsx 바깥)에는 닿지 않는다. */
.mxsx{
  --bg:      #ffffff;
  --accent:  #21487f;
  --accent2: #2f5da3;
  --ink:     #15243f;
  --muted:   #6e7488;
  --line:    #e7e8ec;
  --box1:    #eef4fb;
  --box2:    #e1ecf5;
  --ci1:     #252643;
  --ci2:     #2f376e;
  --r-s: 8px; --r-m: 12px; --r-l: 20px;
  --w: 1200px;
  --shadow: 0 10px 30px rgba(33,72,127,.10);
}

/* 고문·전문위원 묶음이 좁은 화면에서도 3칸을 유지해
   약력 글자가 한 자씩 세로로 쪼개졌다.
   (원본 megax.css 에서 이 규칙이 모바일 미디어쿼리보다 뒤에 있어
    모바일 규칙을 덮어쓴다) */
@media (max-width:760px){
  .mxsx .mx-people.is-advisor{grid-template-columns:1fr}
}
@media (min-width:761px) and (max-width:1024px){
  .mxsx .mx-people.is-advisor{grid-template-columns:repeat(2,1fr)}
}

/* 기획서 6~10p 인물 카드 — 이름 옆 한 줄과 캐치프레이즈 */
.mxsx .ps-name{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px}
.mxsx .ps-tag{font-style:normal;font-size:15px;font-weight:600;color:#5a6376;letter-spacing:-.01em}
.mxsx .ps-catch{margin:14px 0 2px;padding-bottom:16px;border-bottom:1px solid var(--line);
  font-size:16.5px;font-weight:700;line-height:1.6;color:var(--navy);letter-spacing:-.02em;word-break:keep-all}
.mxsx .mx-person.is-lead .ps-catch{font-size:18px}
/* 캐치프레이즈 아래에 선을 하나 긋는데 약력 목록도 제 위에 선을 긋는다.
   그래서 두 줄로 겹쳐 보였다. 캐치 쪽 선만 남기고 약력 쪽 선은 끈다. */
.mxsx .ps-catch + .mx-career,
.mxsx .ps-catch + .ps-career{margin-top:16px;padding-top:0;border-top:0}
@media (max-width:760px){
  .mxsx .ps-tag{font-size:13.5px}
  .mxsx .ps-catch, .mxsx .mx-person.is-lead .ps-catch{font-size:15px}
}


/* ── 구성원 카드 출신마크 (구성원 게시판 첨부2) ──
   경찰·검찰 마크 등을 카드 뒤에 아주 옅게 깐다. 글을 가리지 않도록
   회색으로 빼고 투명도를 낮췄다. 마우스도 받지 않는다. */
.mxsx .mx-person{position:relative}
.mxsx .mx-person .ps-mark{position:absolute;right:5%;top:12%;width:min(230px,26%);
  z-index:0;opacity:.09;pointer-events:none;line-height:0}
.mxsx .mx-person .ps-mark img{width:100%;height:auto;filter:grayscale(1) contrast(.85)}
.mxsx .mx-person .ps-photo,
.mxsx .mx-person .ps-body{position:relative;z-index:1}
@media (max-width:760px){
  .mxsx .mx-person .ps-mark{width:132px;right:4%;top:auto;bottom:16px}
}

/* ── 서브 히어로 윗여백 ──
   머리말이 fixed 로 떠 있어(74px) 그 아래에 바로 글이 붙는다.
   성공사례·자필후기·구성원 등 .mx-sub-hero 를 쓰는 화면에서
   메뉴와 제목 사이가 5px 밖에 남지 않았다.
   머리말 높이에 여백을 더해 띄운다. 모바일은 머리말이 64px 이라
   변수를 그대로 쓰면 같이 줄어든다. */
.mxsx .mx-sub-hero{padding-top:calc(var(--head-h, 74px) + 72px);padding-bottom:72px}
@media (max-width:760px){
  .mxsx .mx-sub-hero{padding-top:calc(var(--head-h, 64px) + 44px);padding-bottom:44px}
}

/* ── 글꼴 통일 : 명조(Noto Serif KR) 빼고 고딕 하나로 ──
   성범죄센터는 Pretendard 한 벌로만 쓰고 위계를 굵기로 낸다.
   학폭센터는 제목류에 명조를 섞어 두었던 것을 같은 방식으로 맞춘다.
   지정된 자리를 하나씩 되돌린다. */
.serif,
.hero-copy h1,
.mx-subhero h1,
.hc-name,
.care-no b,
.ic-tit,
#navPanel .np-list > li > a span,
.lw-ghosttrack span,
.lw-item .l-name{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;
}
/* 명조 700 은 고딕 700 보다 굵어 보인다. 성범죄센터 제목 기준(800)으로 맞춘다. */
.serif,
.hero-copy h1,
.mx-subhero h1,
.hc-name,
.care-no b,
.ic-tit{font-weight:800}
#navPanel .np-list > li > a span{font-weight:700}

/* ── 오른쪽 퀵바 : 성범죄센터와 같은 결로 ──
   성범죄센터(#mx-float)는 54px 원형에 네이비·노랑·화이트 세 가지로만
   쓰고 그림자로 띄운다. 학폭센터는 버튼마다 빨강·핑크·초록이 섞여
   있어 화면이 산만했다. 버튼은 그대로 두고 색·크기만 맞춘다.
   성범죄센터 값 : 54x54 · gap 10 · right 22 · 아이콘 20px ·
                   글자 10.5px/700 · 그림자 0 8px 20px rgba(21,36,63,.22) */
#quick{right:22px;gap:10px}
#quick a{width:54px;height:54px;gap:2px;font-size:10.5px;font-weight:700;
  box-shadow:0 8px 20px rgba(21,36,63,.22);border:1px solid transparent}
#quick a svg{width:20px;height:20px}
#quick .q-tel{background:#21487F;color:#fff}
#quick .q-kko{background:#FEE500;color:#191919}
#quick .q-consult,
#quick .q-yt,
#quick .q-ig{background:#fff;color:#21487F;border-color:#E7E8EC}
/* 흰 버튼이 넷 이어지면 밋밋해 맨 아래만 진네이비로 눌러 준다.
   성범죄센터의 TOP 버튼과 같은 색이다. */
#quick .q-home,
#quick .q-th{background:#15243F;color:#fff}

/* ── REAL STORY : 피해학생·학부모 인터뷰 ──
   One-stop 다음, 누적 지표 앞 구획.
   배경은 빈 교실 사진. 가운데는 영상이 덮으므로 사진에서 살아야 할 곳은
   위쪽과 좌우 가장자리다. 그 위에 흰색을 흘려 덮어 글자를 띄운다.
   아래를 다시 진하게 한 것은 다음 구획(누적 지표, 진회색)으로 넘어가는
   경계를 부드럽게 하려는 것이다. */
#interview{position:relative;background:#F8F9FB;padding:120px 0;overflow:hidden}
#interview::before{content:"";position:absolute;inset:0;
  background:url(../img/interview-bg.jpg) center/cover no-repeat}
#interview::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.74) 0%,rgba(255,255,255,.58) 42%,rgba(248,249,251,.78) 100%)}
#interview .wrap{position:relative;z-index:1}

.iv-head{text-align:center;max-width:900px;margin:0 auto}
.iv-quote{margin-top:20px;font-size:clamp(22px,2.6vw,34px);font-weight:800;line-height:1.5;
  color:var(--navy);letter-spacing:-.03em;word-break:keep-all}
.iv-quote i{font-style:normal;color:var(--gold)}
.iv-head h2{margin-top:18px;font-size:clamp(18px,1.9vw,23px);font-weight:700;
  color:#4E5666;letter-spacing:-.02em}

.iv-player{position:relative;max-width:960px;margin:46px auto 0;aspect-ratio:16/9;
  overflow:hidden;background:#0B1220;box-shadow:0 24px 60px rgba(15,35,80,.16);cursor:pointer}
.iv-player img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.iv-player:hover img{transform:scale(1.03)}
.iv-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.iv-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:86px;height:86px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.3);
  transition:transform .18s,background .18s}
.iv-player:hover .iv-play{transform:translate(-50%,-50%) scale(1.06);background:#fff}
.iv-play::before{content:"";border-left:24px solid var(--navy);
  border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px}
@media (max-width:760px){
  /* 구획이 512px 로 줄면서 배경 사진이 흰 덮개에 다 묻혔다.
     덮개를 옅게 하고 사진 초점을 창가 쪽(왼쪽 위)으로 옮긴다. */
  #interview{padding:56px 0 44px}
  #interview::before{background-position:28% 30%}
  #interview::after{background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,
    rgba(255,255,255,.42) 46%,rgba(248,249,251,.72) 100%)}
  .iv-player{margin-top:26px}
  .iv-play{width:64px;height:64px}
  .iv-play::before{border-left-width:18px;border-top-width:11px;border-bottom-width:11px}
}

/* ── 오시는 길 지도 ──
   구글 iframe 대신 다음(카카오) 약도 또는 네이버 지도를 넣는다.
   약도는 픽셀 크기를 받아 그리므로 칸에 꽉 차도록 눌러 준다. */
.loc-map .lm-frame{position:absolute;inset:0;width:100%;height:100%}
.loc-map .root_daum_roughmap{width:100%;height:100%;max-width:none}
.loc-map .root_daum_roughmap .wrap_map{width:100%;height:100%}
.loc-map .root_daum_roughmap .wrap_map img{max-width:none}
.loc-map .root_daum_roughmap .map_border{border:0}
/* 약도가 붙이는 주소·전화 띠는 감춘다.
   그 값은 퍼가기 키에 등록된 것이라 상호도 전화도 비어 있다.
   정확한 주소·전화·팩스·주차는 지도 오른쪽 칸에 이미 나온다.
   (본사 사이트 megaxlaw.co.kr 도 이 띠를 감춰 두었다) */
.loc-map .root_daum_roughmap .section_address{display:none !important}

/* ── 누적 지표 : 모바일 높이 ──
   세로로 셋을 쌓으면서 아이콘·숫자·이름이 각각 한 줄씩 차지해
   화면 하나를 통째로 먹었다. 아이콘을 숫자 왼쪽으로 옮겨 한 덩어리로 만든다. */
@media (max-width:760px){
  #counter{padding:44px 0}
  .cnt-grid{gap:20px}
  /* 숫자 자릿수가 달라도 아이콘이 한 줄에 서도록 오른쪽 칸 폭을 고정한다 */
  .cnt{display:grid;grid-template-columns:34px 148px;justify-content:center;
    column-gap:16px;align-items:center;text-align:left}
  .cnt .c-ico{grid-row:1/3;width:34px;height:34px;margin:0}
  .cnt .c-ico svg{width:34px;height:34px}
  .cnt .c-num{margin-top:0;font-size:32px}
  .cnt .c-num small{font-size:16px}
  .cnt .c-key{margin-top:2px;font-size:14px}
}

/* ── 오시는 길 : 교통편 ──
   지도·정보 칸 아래에 지하철과 버스를 나란히 둔다.
   승용차(주차)는 위 정보 칸에 이미 있어 여기 넣지 않았다. */
.loc-way{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--line);border-top:0}
.loc-way .way{padding:30px 34px}
.loc-way .way + .way{border-left:1px solid var(--line)}
.loc-way h4{font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--gold)}
.loc-way p{margin-top:12px;font-size:19px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.loc-way span{display:block;margin-top:8px;font-size:14.5px;line-height:1.75;color:#5D6579;word-break:keep-all}
.loc-way dl{margin-top:12px;display:grid;grid-template-columns:52px minmax(0,1fr);
  row-gap:9px;column-gap:12px;align-items:start}
.loc-way dt{font-size:12.5px;font-weight:800;color:var(--navy);
  background:#EEF2F8;border-radius:2px;text-align:center;padding:3px 0}
.loc-way dd{font-size:14px;line-height:1.6;color:#5D6579;word-break:keep-all}
@media (max-width:1024px){
  .loc-way{grid-template-columns:1fr}
  .loc-way .way + .way{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:760px){
  .loc-way .way{padding:24px 20px}
  .loc-way p{font-size:17.5px}
  .loc-way dl{grid-template-columns:46px minmax(0,1fr)}
}

/* ── 관리자 전용 띠 (관리자로 로그인했을 때만) ──
   머리말 위 34px 띠. 머리말이 붙박이라 그만큼 아래로 내리고
   --head-h 도 함께 키워 서브 화면 윗여백이 어긋나지 않게 한다. */
#mxAdmBar{position:fixed;left:0;top:0;width:100%;height:34px;z-index:1300;
  background:#0B1220;color:#E7ECF6;font-size:13px;line-height:34px}
#mxAdmBar .wrap{display:flex;align-items:center;gap:16px;height:34px}
#mxAdmBar .ab-tag{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.14em;
  color:#0B1220;background:var(--gold-l);padding:2px 8px;border-radius:2px;line-height:1.5}
#mxAdmBar nav{display:flex;align-items:center;gap:18px;flex:1 1 auto;min-width:0}
#mxAdmBar a{color:#D7DEEC;font-weight:600;white-space:nowrap}
#mxAdmBar a:hover{color:#fff;text-decoration:underline}
#mxAdmBar .ab-out{flex:0 0 auto;color:#8FA0BF}
body.has-admbar{--head-h:108px}
body.has-admbar #head{top:34px}
@media (max-width:760px){
  body.has-admbar{--head-h:98px}
  #mxAdmBar{font-size:12px}
  #mxAdmBar .wrap{gap:10px;padding:0 16px}
  #mxAdmBar nav{gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #mxAdmBar .ab-tag{display:none}
}

/* ── 성공사례 담당자 고르기 ────────────────────────────────
   영문판 성공사례와 같은 방식. 고른 사람이 이름표로 쌓이고 ×로 뺀다.
   이름표는 줄바꿈으로 흘러가며, × 는 손가락으로 누를 만한 크기를 준다. */
.mxsx .mx-att-sel{max-width:420px}
.mxsx .mx-att-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mxsx .mx-att-tags:empty{display:none}
.mxsx .mx-att-tag{display:inline-flex;align-items:center;gap:6px;
  padding:7px 8px 7px 14px;border:1px solid #cfdcee;border-radius:999px;
  background:#eef3fa;color:var(--accent);font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.mxsx .mx-att-tag .at-nm{line-height:1.3}
.mxsx .mx-att-tag .at-x{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;border:0;border-radius:50%;
  background:rgba(33,72,127,.12);color:var(--accent);
  font-size:15px;line-height:1;cursor:pointer;transition:background .15s}
.mxsx .mx-att-tag .at-x:hover{background:rgba(33,72,127,.24)}
.mxsx .mx-att-tag .at-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mxsx .mx-att-sel option:disabled{color:#a9b0bd}
.mxsx .mx-nw{white-space:nowrap}   /* × 와 조사가 줄 끝에서 갈라지지 않게 */
@media (max-width:760px){
  .mxsx .mx-att-sel{max-width:100%}
  .mxsx .mx-att-tag{font-size:13px;padding:8px 8px 8px 13px}
  .mxsx .mx-att-tag .at-x{width:24px;height:24px}
}