/*
 * apply-home-button.css — 홈(Index) 히어로 '지원하기' CTA.
 * 시안3(sian03) 원형 CTA: 그린→블루 솔리드 원 + 중앙 "교원 공채 지원하기" + 둘레 회전 텍스트(FACULTY RECRUITMENT) + 화살표(login icon_blue_arrow).
 * 솔리드 채택 이유: 반투명 글래스는 변하는 영상 배경(하늘·잔디·벽돌)에 묻혀 대비가 없음 → 솔리드로 존재감 확보.
 * 로드: MainHeader.razor HeadContent (홈 전용). 마크업: Index.razor <a class="apply-home-cta">. 톤/크기는 :root 변수.
 */
:root {
  --apply-cta-size:        280px;
  --apply-cta-fill:        linear-gradient(135deg, #2f9e8f 0%, #3267ad 100%);   /* 시안3 그린→블루 솔리드 */
  --apply-cta-fill-hover:  linear-gradient(135deg, #34ab9b 0%, #3a72bd 100%);
  --apply-cta-ring-color:  #ffffff;     /* 둘레 회전 텍스트 — 흰색 + 그림자(영상 위 가독성) */
  --apply-cta-text:        #ffffff;
}

.apply-home-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--apply-cta-size);
    height: var(--apply-cta-size);
    text-decoration: none;
    cursor: pointer;
}

/* 둘레 회전 텍스트 (SVG textPath, 무한 회전) — 영상 위 가독성 위해 drop-shadow */
.apply-home-cta__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    animation: apply-cta-spin 18s linear infinite;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.apply-home-cta__ring-text {
    fill: var(--apply-cta-ring-color);
    font-family: "Paperozi", sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
@keyframes apply-cta-spin { to { transform: rotate(360deg); } }

/* 중앙 솔리드 그라데이션 원 (시안3 톤) */
.apply-home-cta__circle {
    position: relative;
    z-index: 1;
    width: 75%;             /* 280*.75 = 210px */
    height: 75%;
    border-radius: 50%;
    background: var(--apply-cta-fill);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.apply-home-cta__label {
    color: var(--apply-cta-text);
    font-family: "Paperozi", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,.2);
}
/* 화살표 — Login 버튼과 동일 아이콘(icon_blue_arrow.svg), 흰색 처리 */
.apply-home-cta__arrow {
    width: 26px;
    height: auto;
    margin-top: 6px;
    filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.2));
}

/* hover — 그라데이션 살짝 밝게 + 살짝 확대 */
.apply-home-cta:hover .apply-home-cta__circle {
    transform: scale(1.04);
    background: var(--apply-cta-fill-hover);
    box-shadow: 0 14px 38px rgba(0,0,0,.30);
}
.apply-home-cta:active .apply-home-cta__circle { transform: scale(1); }

/* 키보드 포커스 — 웹접근성(KWCAG) */
.apply-home-cta:focus-visible { outline: none; }
.apply-home-cta:focus-visible .apply-home-cta__circle { outline: 3px solid #fff; outline-offset: 4px; }

/* 모션 최소화 존중 — 회전 정지 */
@media (prefers-reduced-motion: reduce) {
    .apply-home-cta__ring { animation: none; }
    .apply-home-cta:hover .apply-home-cta__circle { transform: none; }
}

/* ============ 위치 — 히어로 우측 (기존 자리 유지) ============ */
.sec01-slide .apply-home-cta {
    position: absolute;
    top: 36%;
    right: 40px;
    transform: translateY(-50%);
}

/* 좁은 폭(모바일) — absolute 겹침 해제: 원을 텍스트 아래로 흐름 배치 + 가운데 + 축소.
   (기존: absolute right:16px 200px 원이 좁은 화면서 헤드라인 텍스트를 덮던 문제) */
@media (max-width: 767px) {
    :root { --apply-cta-size: 150px; }
    .sec01-slide .apply-home-cta {
        position: relative;   /* static 아님 — 링(absolute inset:0)의 기준 컨테이너 유지. 흐름 배치는 top/right auto 로 */
        display: flex;
        transform: none;
        top: auto;
        right: auto;
        margin: 26px auto 0;
    }
    .apply-home-cta__label { font-size: 17px; }
    .apply-home-cta__arrow { width: 16px; }
    .apply-home-cta__ring-text { font-size: 10.5px; }
    /* CTA가 텍스트 아래(흐름)로 와서, 카드(.sec01-quick-menu, main.css ≤1024: -400px)가 CTA를 덮음.
       근데 CTA는 세로중앙 .s__row 안이라 위치가 폭마다 달라짐(텍스트 줄바꿈) → 고정 margin은 한쪽서 겹치거나 갭 큼.
       측정(Playwright): -360 기준 354px=14px갭 / 682px=85px갭. 폭에 비례해 더 당겨 전 폭 ~14px 일정 갭 유지. */
    .sec01-quick-menu { margin-top: calc(-360px - (100vw - 354px) * 0.22); }
}