/* ══════════════════════════════════════════════════════════
   custom.css — 이 저장소 전용 덧칠

   style.css 는 edu-counseling-landing 프로젝트의 assets/css/style.css 를
   "한 글자도 고치지 않고" 복사해 온 파일이다. 참고 프로젝트가 갱신되면
   그 파일만 통째로 덮어쓰면 되고, 이 저장소에서만 필요한 차이는 전부
   여기에 모아 style.css 다음에 로드한다.

   → style.css 는 절대 직접 편집하지 말 것.
   ══════════════════════════════════════════════════════════ */

/* ── 1. hidden 속성 ──────────────────────────────────────────
   hidden 은 브라우저 기본 display:none 이라 display 를 지정한 클래스
   (.rm-card 의 grid 등)에 그대로 덮인다. JS가 hidden 으로 여닫는 요소가
   여럿이라 전역으로 못 박아 둔다. */
[hidden]{display:none!important}

/* ── 2. 다국어 제목 글꼴 ─────────────────────────────────────
   Gmarket Sans 는 한글·ASCII 위주라 움라우트·악센트·키릴·가나에서 폰트
   폴백이 섞여 한 단어 안에서 글자 모양이 달라진다(예: Erkl+ä).
   ko·en 에서만 제목용으로 쓰고 나머지 언어는 Pretendard 로 통일한다. */
html:not([lang="ko"]):not([lang="en"]){--f-dis:var(--f-body)}

/* ── 3. 헤더: 목차가 긴 언어 대응 ────────────────────────────
   참고 프로젝트는 한국어 8개 항목 기준이라 1000px 부터 목차를 펼치지만,
   독일어·러시아어는 같은 항목이 훨씬 길어 로고를 밀어낸다.
   ① 펼치는 기준을 1240px 로 올리고 ② 로고를 축소 불가로 고정하고
   ③ 그래도 넘칠 때는 목차 안에서만 가로 스크롤되게 한다. */
.brand{flex:none}
.head-act{flex:none}
.nav{min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap}

@media (max-width:1239px){
  .nav{display:none}
  .burger{display:grid}
  .head-act{margin-left:auto}
  /* 참고 프로젝트는 top:72px 이지만 헤더 높이는 88px 이라 겹친다 */
  .nav.open{
    display:flex;flex-direction:column;position:absolute;left:0;right:0;top:88px;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:10px var(--gut) 22px;gap:2px;box-shadow:var(--shadow);
  }
  .nav.open a{padding:13px 6px;font-size:17px;border-radius:8px}
  .nav.open a.on::after{display:none}
}
@media (min-width:1240px){
  .nav{display:flex}
  .burger{display:none}
  .head-act{margin-left:0}
}
/* 참고 시안은 620px 미만에서 헤더 버튼을 숨긴다(모바일 메뉴 안에 로그인이 있는 구조).
   여기서는 모바일 메뉴에 목차만 들어가므로 숨기면 로그인 진입점이 사라진다.
   대신 좁은 화면에서는 버튼을 작게 줄인다. */
.head-act .btn-solid,.head-act .btn-ghost{display:inline-flex}
@media (max-width:479px){
  .head-act .btn-solid,.head-act .btn-ghost{padding:9px 14px;font-size:13.5px}
}

/* 로그인 사용자 인사말 — 가로 여유가 충분할 때만 노출 */
.head-greet{display:none;font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap}
@media (min-width:1480px){.head-greet{display:inline}}

/* ── 4. 모달: 번역이 길어지면 스크롤 ─────────────────────────
   참고 프로젝트는 한국어 분량 고정이라 넘칠 일이 없지만, 러시아어·독일어에서
   본문이 길어지면 화면 밖으로 잘린다. 머리말/버튼은 고정하고 본문만 스크롤. */
.modal-box{display:flex;flex-direction:column;max-height:calc(100vh - 40px)}
.modal-head{flex:none}
.modal-body{overflow-y:auto}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:0 24px 24px;flex:none;flex-wrap:wrap}

/* ── 5. 상담 예시 화면의 6축 라벨 ────────────────────────────
   careerMap.json 의 용어는 참고 시안의 단어보다 길어 두 줄이 된다. */
.cs-axis{font-size:clamp(11px,1.1vw,15px);line-height:1.35}

/* ── 6. '검사를 마치면 받게 되는 것' 목록 ────────────────────
   참고 시안은 3열(아이콘·본문·기간)이지만 이 저장소는 기간을 쓰지 않는다. */
.seminar li{grid-template-columns:auto 1fr}
.seminar li .sm-t b{color:var(--band-ink)}

/* ── 7. 히어로 지표 구분선 ───────────────────────────────── */
@media (min-width:720px){
  .hero-meta dl+dl{border-left:1px solid var(--band-line)}
}

/* ══════════════════════════════════════════════════════════
   8. 로그인 페이지 (/social)
   참고 프로젝트에는 소셜 버튼만 있지만 이 저장소는 이메일 로그인·회원가입·
   비밀번호 찾기·오류 표시가 함께 들어간다. 배경은 히어로와 같은 딥네이비.
   ══════════════════════════════════════════════════════════ */
/* 참고 시안은 height:100vh 고정이다. 소셜 버튼 4개만 있던 시절엔 맞았지만
   이메일 폼·게시판 목록·결제 요약이 들어가면 내용이 100vh 를 넘겨 배경이 끊긴다. */
.login-screen,.board-screen,.payment-screen{height:auto;min-height:100vh}

.login-screen{
  background-color:var(--band);
  background-image:linear-gradient(180deg,rgba(4,29,56,.62),rgba(4,29,56,.9)),url('/assets/img/bg-main.jpg');
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
  background-attachment:fixed,fixed;
}
/* 로고도 어두운 배경용(흰 글자)으로 바꾼다.
   data-theme=light 로 고정했으므로 lg-light/lg-dark 자동 전환이 걸리지 않는다.
   :root[data-theme=light] .lg-light 보다 특이성이 높아야 이긴다. */
:root[data-theme] .login-screen .lg-light{display:none}
:root[data-theme] .login-screen .lg-dark{display:block}
/* 어두운 배경 위 헤더·푸터 — 밝은 글자/테두리로 전환 */
.login-screen .site-head{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
.login-screen .site-head.stuck{border-bottom-color:rgba(242,247,253,.14)}
.login-screen .nav a{color:var(--band-ink-2)}
.login-screen .nav a:hover{color:var(--band-ink);background:rgba(242,247,253,.1)}
.login-screen .icon-btn{background:transparent;border-color:rgba(242,247,253,.28)}
.login-screen .icon-btn:hover{border-color:var(--band-ink-2)}
.login-screen .burger span,
.login-screen .burger span::before,
.login-screen .burger span::after{background:var(--band-ink)}
/* 열린 상태에서는 가운데 바가 사라져야 X 모양이 된다 (위 규칙에 덮이지 않도록 재선언) */
.login-screen .burger[aria-expanded="true"] span{background:transparent}
.login-screen .site-foot{background:transparent;border-top-color:rgba(242,247,253,.14);color:var(--band-ink-2)}
.login-screen .site-foot a{color:var(--band-ink-2)}
.login-screen .site-foot a:hover{color:var(--brand)}
.login-screen .foot-nav b{color:var(--band-ink-2)}
.login-screen .foot-nav span{color:var(--band-ink-2)}
.login-screen .foot-legal{color:var(--band-ink-2)}
.login-screen .site-foot select{color:var(--band-ink-2)}
.login-screen .site-foot select option{color:var(--ink)}
@media (max-width:1239px){
  .login-screen .nav.open{background:var(--band-card);border-bottom-color:var(--band-line)}
}

.login-wrapper{gap:22px;padding:clamp(36px,7vw,72px) var(--gut)}
.login-card{
  width:min(380px,100%);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(26px,4vw,34px);
}
.login-card h1{font-size:23px;text-align:center;margin-bottom:6px}
.login-card .login-sub{text-align:center;color:var(--ink-3);font-size:14px;margin-bottom:24px;line-height:1.6}

.email-login-container{display:flex;flex-direction:column}
.email-login-container label{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:7px;
}
.email-login-container input{
  font-family:var(--f-body);font-size:15.5px;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r);
  padding:13px 16px;margin-bottom:16px;width:100%;transition:border-color .18s,background-color .18s;
}
.email-login-container input:focus{outline:none;border-color:var(--brand);background:var(--card)}
.email-login-container .btn{margin-top:4px}

.login-options{display:flex;justify-content:center;gap:8px 20px;flex-wrap:wrap;margin-top:16px;font-size:13.5px}
.login-options a{color:var(--ink-3);text-decoration:none;transition:color .18s}
.login-options a:hover{color:var(--brand-txt)}

.login-error{
  background:color-mix(in srgb,var(--pe) 10%,var(--card));
  border:1px solid color-mix(in srgb,var(--pe) 35%,var(--line));
  color:var(--pe);border-radius:var(--r);padding:12px 16px;font-size:14px;line-height:1.6;margin-bottom:18px;
}
.login-divider{
  display:flex;align-items:center;gap:14px;margin:24px 0 18px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* 참고 프로젝트의 .login-container 는 폭 300px 고정 + 자체 .btn 정의를 쓴다.
   여기서는 카드 안에 들어가므로 폭을 카드에 맡기고 랜딩 .btn 을 그대로 쓴다. */
.login-container{width:auto;margin:0;display:flex;flex-direction:column;gap:10px}
.login-container .btn{
  width:100%;padding:13px 20px;font-size:15px;font-family:var(--f-body);font-weight:600;
  margin:0;box-shadow:none;
}
.login-container .btn:hover{transform:translateY(-2px)}
.login-container .btn img{width:20px;height:20px;flex:none;margin-right:0}
.login-container .for-kakao{background-color:#FEE500;color:#191600}
.login-container .for-naver{background-color:#03C75A;color:#fff}
.login-container .for-google{background-color:#fff;border-color:var(--line-2);color:#1F1F1F}
.login-container .for-apple{background-color:#000;color:#fff}

/* ══════════════════════════════════════════════════════════
   9. 게시판 (공지사항 / 이벤트)
   참고 시안에 없는 상태만 보탠다. 표·페이지네이션은 style.css 그대로.
   ══════════════════════════════════════════════════════════ */
/* 표의 td 는 목록에서 제목·날짜를 양끝으로 벌리려고 flex(space-between) 다.
   상세 본문은 자식이 하나뿐이라 그대로 두면 가운데로 몰린다. */
.board-container .table-board td .detail{flex:1 1 100%}
.board-container .board-empty{text-align:center;color:var(--ink-3);padding:3rem 0;display:block;flex:1 1 100%}
.board-container .pagination li.disabled a{color:var(--ink-3);opacity:.4;pointer-events:none}
.board-files{
  margin-top:1.2rem;padding:.9rem 1.1rem;background:var(--paper-2);border-radius:var(--r);
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-size:.88rem;
}
.board-files span{color:var(--ink-3);flex-shrink:0}
.board-files a{color:var(--ink);text-decoration:underline}
.board-files a:hover{color:var(--brand-txt)}

/* ══════════════════════════════════════════════════════════
   10. 결제
   ══════════════════════════════════════════════════════════ */
/* 참고 시안은 '선택' 버튼 하나뿐이지만, 프로페셔널은 결제가 아니라
   문의 모달을 열어야 해서 선택 상태에서도 버튼이 남아야 한다. */
.payment-wrapper .pricing .plan.is-inquiry.selected button{display:inline-flex}
/* 요금제 선택 시 여기로 스크롤한다(payment.html scrollToPurchaseDetail).
   html 의 scroll-padding-top:88px(고정 헤더)에 여백을 조금 더 준다. */
.payment-wrapper .payment-container{scroll-margin-top:12px}
.payment-wrapper .payment-summary .coupon-error{color:var(--pe);font-size:.8em;margin-top:.4em;display:none}
.payment-wrapper .payment-info .coupon-error{color:var(--pe);font-size:.8em;margin-top:.4em;display:none}
.payment-wrapper .coupon-discount-row{display:none}
.payment-wrapper .payment-summary .btn[disabled]{
  background:var(--line);color:var(--ink-3);box-shadow:none;cursor:not-allowed;transform:none;
}
.payment-wrapper .btn-back{
  display:flex;justify-content:center;width:100%;margin-top:.5rem;padding:.75rem;
  font-size:.875rem;background:transparent;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:var(--r);text-decoration:none;
}
.payment-wrapper .btn-back:hover{border-color:var(--ink);color:var(--ink)}

/* 결제 진행중 · 완료 · 실패 — 결제 화면 틀 안의 상태 카드 */
.payment-status{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.2rem;text-align:center;min-height:52vh;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:clamp(32px,6vw,64px) var(--gut);
}
.payment-status h2{font-size:clamp(20px,2.6vw,26px)}
.payment-status p{color:var(--ink-2);font-size:.95rem;white-space:pre-line}
.payment-status .status-icon{font-size:3rem;line-height:1}
.payment-status .spinner{
  width:48px;height:48px;border:5px solid var(--line);border-top-color:var(--brand);
  border-radius:50%;animation:pay-spin .8s linear infinite;
}
@keyframes pay-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .payment-status .spinner{animation-duration:2s}
}