@charset "utf-8";
/* ─────────────────────────────────────────────────────────────────────────
   이벤트 FAQ 공통영역 (어드민 `hc_event_faq` 연동) — PC
   기획안: 이벤트 FAQ 관리 기능 추가_비통합 v1.1
   디자인 정본: Figma `WD1_해커스캠퍼스` 섹션 507:7

   ⚠ 이 파일은 **공통 자산**이다. 개별 이벤트 `_event.css` 에 복사하지 말 것 —
   2026/08/0500 과 2026/06/1100 이 각자 마크업을 들고 있다가 스킨·하이퍼링크·JSON-LD가
   서로 어긋난 전례가 있다(#4069). 규격 변경은 반드시 여기서 한다.

   로드 지점: `fragments/event-faq :: eventFaqHead` (FAQ 데이터가 있을 때만 link 됨)
   ───────────────────────────────────────────────────────────────────────── */

/* ── 어드민 FAQ 영역 (스킨 A/B/C) ─────────────────────────────────────────
   디자인 정본: Figma `WD1_해커스캠퍼스` 섹션 507:7
     A = ver1 다크   (507:8   1.FAQ PC_B)
     B = ver1 라이트 (507:81  1-2.FAQ PC_W)
     C = ver2 플랫   (507:152 2.FAQ PC2_W)
   색·폰트·radius·행높이는 Figma REST 실측값이다(추정이 아니다).
   ⚠ `.e_faq_box`·`.user_info` 를 재사용하지 않는다 — 공용 common.css 가 그 두 선택자에
   `width:1000px`·`height:80px`·스프라이트 배경·`margin:50px auto` 를 걸어둔다. 재사용하면
   폭이 2540px 로 튀고(#4069 실측) override 를 계속 덧붙여야 한다.
   기존 '해커스 이벤트 이용 안내'(`#faq_link`)와 선택자가 겹치지 않는다. */

/* 펼침·접힘에서 **움직이는 것은 패널 높이 하나뿐**이다. 질문 줄 여백·마커·아이콘 위치를
   같이 전이시키면 행이 위아래로 흔들리는 것과 패널이 자라는 것이 겹쳐 울렁거린다
   (어학원 공통영역 `web/css/contents/event/common/event-faq.css` 도 같은 규칙 —
   질문 줄 기하는 상태와 무관하게 고정이고 `max-height` 만 전이한다).
   색(배경·구분선·아이콘)은 레이아웃을 안 건드리므로 같은 곡선으로 함께 전이한다. */
.evtfaq_wrap { position:relative; width:100%;
               --evtfaq-dur:.35s; --evtfaq-ease:ease; }
@media (prefers-reduced-motion: reduce) { .evtfaq_wrap { --evtfaq-dur:.001s; } }

/* 상·하 여백은 Figma 실측이다 — ver1(507:81) 프레임 886px 안에서 제목 top 109px,
   마지막 행 bottom 이후 100px. ver2 는 99/106(507:152, 프레임 819px). */
.evtfaq_box  { position:relative; width:1000px; max-width:94%; margin:0 auto; padding:109px 0 100px;
               box-sizing:border-box;
               /* SUIT 는 획이 얇아 서브픽셀 렌더에서 뭉친다 — 시안 두께로 보이게 그레이스케일로 그린다 */
               -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.evtfaq_box * { box-sizing:border-box; }

/* 서체는 `.evtfaq_box` 한 곳에만 걸면 적용되지 않는다(#4069 재발).
   레이아웃이 먼저 읽는 `common/css/sub/sub.css:33` 이
     `* { font-family:"NanumGothicBold", sans-serif }`
   로 **모든 요소를 직접** 매치하는데, 직접 매치는 특정도와 무관하게 상속을 이긴다.
   즉 상자에만 SUIT 를 선언하면 제목·질문·답변은 전부 NanumGothicBold 로 그려진다.
   자손까지 명시적으로 선언하면 `.evtfaq_box *`(0,1,0) > `*`(0,0,0) 이라 !important 없이 이긴다.
   웹폰트 적재는 페이지 head 의 SUIT@2.0.5 CDN 선언이다 — 미적재 시 폴백은 시안보다 두껍게 보인다. */
.evtfaq_box, .evtfaq_box * { font-family:'SUIT','Pretendard','Noto Sans KR',sans-serif; }

.evtfaq_tit  { margin:0 0 27px; padding:0; font-size:44px; line-height:55px; font-weight:800;
               letter-spacing:0; text-align:center; color:#222222; }

.evtfaq_list { width:auto; margin:0; padding:0; list-style:none; counter-reset:evtfaq; }
.evtfaq_list > li { position:relative; counter-increment:evtfaq; }

/* 질문 줄 — 마커("Q1.")를 고정폭 칼럼으로 둔다. 인라인이면 질문이 두 줄이 될 때 둘째 줄이
   마커 아래까지 파고들어 답변 들여쓰기와도 어긋난다(두 자리 번호 Q10. 도 안전).
   칼럼 폭 44px 은 시안 자체 값이다 — 답변 좌패딩 79px − 질문 좌패딩 35px. */
.evtfaq_q    { display:flex; align-items:flex-start; position:relative; width:auto; height:auto; margin:0;
               padding:30px 90px 30px 35px; text-decoration:none; cursor:pointer;
               font-size:22px; line-height:27.5px; font-weight:800; color:#222222; }
.evtfaq_q:hover, .evtfaq_q:focus { text-decoration:none; }
/* 마우스 클릭에는 테두리가 남지 않고 키보드 이동에만 보인다 */
.evtfaq_q:focus-visible { outline:2px solid #39A4F2; outline-offset:-6px; }
.evtfaq_qmark { flex:0 0 44px; color:#39A4F2; }
.evtfaq_qmark::before { content:'Q' counter(evtfaq) '.'; }
/* 한국어는 어절 단위로 끊는다 — 기본값은 단어 중간에서 잘려 시안과 줄바꿈이 달라진다 */
.evtfaq_qtext { flex:1 1 auto; min-width:0; word-break:keep-all; overflow-wrap:break-word; }

/* 답변 패널 — 높이 애니메이션을 CSS 가 한다. 종전 jQuery slideDown/slideUp 은 두 지점에서 튀었다.
     · 시작: jQuery 는 height 만 0 으로 잡고 답변 padding(17+30=47px)은 그대로 둬서
       첫 프레임에 47px 블록이 통째로 나타났다.
     · 끝: 인라인 display/height 를 쥔 상태에서 `on` 클래스가 붙고 떨어져 여백·아이콘 transition 과
       구간이 어긋났다.
   여백 없는 패널만 max-height 로 접고 답변 여백은 안쪽 `.evtfaq_a` 가 갖는다 —
   시작·끝 프레임이 모두 0 높이라 튀는 지점이 없다. 펼친 높이는 JS 가 실측해 인라인으로 넣는다
   (`max-height:none` 으로는 transition 이 걸리지 않는다). */
.evtfaq_panel { overflow:hidden; max-height:0; visibility:hidden;
               transition:max-height var(--evtfaq-dur) var(--evtfaq-ease),
                          visibility 0s linear var(--evtfaq-dur); }
.evtfaq_list > li.on .evtfaq_panel { visibility:visible;
               transition:max-height var(--evtfaq-dur) var(--evtfaq-ease),
                          visibility 0s linear 0s; }
/* 답변 위 간격은 질문 줄의 고정된 아래여백(30px)이 만든다 — 답변에 top 여백을 또 주면
   펼친 행이 시안보다 벌어진다. 시안은 펼칠 때 질문 줄 아래여백을 30→0 으로 줄이고
   답변에 17px 을 주지만(합 17px), 그 30px 감소가 패널 성장과 반대로 움직여 울렁거림의
   주원인이었다. 여백을 고정하는 대신 펼친 상태 간격만 30px 로 둔다(시안 17px). */
.evtfaq_a    { padding:0 90px 30px 79px;
               font-size:16px; line-height:25px; font-weight:500; color:#222222;
               word-break:keep-all; overflow-wrap:break-word; }
/* $URL$ 치환 링크 — 질문·답변 양쪽에 들어온다(기획서 슬4 공통사항) */
.evtfaq_q a, .evtfaq_a a { color:#39A4F2; text-decoration:underline; }

/* 토글 아이콘 — 48px 원형 + 16x2 막대(펼침 `−` / 접힘 `+`) */
.evtfaq_ico  { position:absolute; top:20px; right:25px; width:48px; height:48px;
               background:none; border:1px solid #6C6C6C; border-radius:50%; }
.evtfaq_ico::before, .evtfaq_ico::after {
               content:''; position:absolute; top:50%; left:50%; background:#6C6C6C; }
.evtfaq_ico::before { width:16px; height:2px; margin:-1px 0 0 -8px; }
/* `+` → `−` 는 세로 막대를 접어서 만든다. 그냥 사라지면 딸깍 끊기고, 돌면서 사라지면 이어진다 */
.evtfaq_ico::after  { width:2px; height:16px; margin:-8px 0 0 -1px;
               transition:opacity var(--evtfaq-dur) var(--evtfaq-ease),
                          transform var(--evtfaq-dur) var(--evtfaq-ease); }
.evtfaq_list > li.on .evtfaq_ico::after { opacity:0; transform:rotate(90deg); }

/* 스킨 A·B 공통 — 카드형(ver1) */
.evtfaq-skin-A .evtfaq_list > li,
.evtfaq-skin-B .evtfaq_list > li { margin-bottom:8px; border-radius:15px; overflow:hidden; }
.evtfaq-skin-A .evtfaq_list > li:last-child,
.evtfaq-skin-B .evtfaq_list > li:last-child { margin-bottom:0; }

/* 스킨 A — ver1 다크 */
.evtfaq-skin-A { background:#3A3F45; }
.evtfaq-skin-A .evtfaq_tit { color:#FFFFFF; }
.evtfaq-skin-A .evtfaq_list > li { background:#2D3135; }
.evtfaq-skin-A .evtfaq_q, .evtfaq-skin-A .evtfaq_a { color:#FFFFFF; }
.evtfaq-skin-A .evtfaq_ico::before,
.evtfaq-skin-A .evtfaq_ico::after { background:#D9D9D9; }

/* 스킨 B — ver1 라이트 */
.evtfaq-skin-B { background:#FFFFFF; }
.evtfaq-skin-B .evtfaq_list > li { background:#EEEEEE; }

/* 스킨 C — ver2 플랫 리스트 */
.evtfaq-skin-C { background:#FFFFFF; }
.evtfaq-skin-C .evtfaq_box { padding:99px 0 106px; }
.evtfaq-skin-C .evtfaq_tit { margin:0 0 30px; font-size:40px; line-height:55px;
               letter-spacing:-0.02em; text-align:left; }
.evtfaq-skin-C .evtfaq_list { border-top:2px solid #303030; }
/* 펼칠 때 배경·radius 와 함께 아래 구분선 색도 같은 곡선으로 빠진다 — 즉시 바뀌면 1px 선이 깜빡였다 */
.evtfaq-skin-C .evtfaq_list > li { border-bottom:1px solid #C3D1DD;
               transition:background-color var(--evtfaq-dur) var(--evtfaq-ease),
                          border-radius var(--evtfaq-dur) var(--evtfaq-ease),
                          border-color var(--evtfaq-dur) var(--evtfaq-ease); }
.evtfaq-skin-C .evtfaq_q { padding:22px 70px 21px 62px; font-size:20px; line-height:25px; font-weight:700; }
.evtfaq-skin-C .evtfaq_qmark { position:absolute; top:22px; left:34px;
               font-size:20px; line-height:25px; font-weight:800; color:#108DE6; }
.evtfaq-skin-C .evtfaq_qmark::before { content:'Q'; margin:0; }
/* ver2 답변은 SUIT Regular(400) 이다 — ver1 의 Medium(500) 을 물려받으면 안 된다(507:152 실측). */
.evtfaq-skin-C .evtfaq_a { padding:0 70px 44px 62px; font-weight:400; color:#444444; }
.evtfaq-skin-C .evtfaq_q a, .evtfaq-skin-C .evtfaq_a a { color:#108DE6; }
.evtfaq-skin-C .evtfaq_list > li.on {
               background:rgba(16,141,230,.1); border-radius:20px; border-bottom-color:transparent; }
/* 시안은 펼친 행의 위여백을 22→35px 로 키우지만(마커도 함께 내려온다) 그 이동이 패널
   성장과 겹쳐 울렁거렸다 — 접힘·펼침 모두 22px 로 고정한다. */
.evtfaq-skin-C .evtfaq_ico { top:24px; right:36px; width:19px; height:19px;
               border:0; border-radius:0; }
.evtfaq-skin-C .evtfaq_ico::before { width:19px; height:4px; margin:-2px 0 0 -9.5px; background:#108DE6; }
.evtfaq-skin-C .evtfaq_ico::after  { width:4px; height:19px; margin:-9.5px 0 0 -2px; background:#108DE6; }

/* ver2 CTA 알약 버튼(241x70 / r60 / #108DE6).
   ⚠ 현재 스키마(질문·답변·스킨)에는 CTA 문안·URL 컬럼이 없어 마크업에서 렌더하지 않는다.
   어드민에 필드가 생기면 이 클래스만 붙이면 된다. */
.evtfaq_cta  { display:block; width:241px; height:70px; margin:40px auto 0; border-radius:60px;
               background:#108DE6; color:#FFFFFF; font-size:22px; line-height:70px; font-weight:800;
               text-align:center; text-decoration:none; }
.evtfaq-skin-C .evtfaq_cta { position:absolute; top:60px; right:0; margin:0; }