/* ----------------------------------------------------------------------
   공통 히어로 — 첫 화면 문구 + 블렌디움 표지 부채꼴.
   2026-10-13 밝게 다시 짬 — 박두성 대표 「메인화면이 너무 어두워 보여요… 블렌디움 교재 앞표지를 넣어서」.
   예전 어두운 사진 슬라이더는 he-hero.css.bak.20261013bright 에 있다.

   짝: resources/views/partials/he-hero.blade.php
---------------------------------------------------------------------- */

.he-hero {
    --he-ink: #14233a;
    --he-sub: #4a5a70;
    --he-teal: #0f766e;
    --he-orange: #f08a24;
    position: relative;
    overflow: hidden;
    color: var(--he-ink);
    /* 밝은 종이색 바탕 — 표지 색(코랄 · 보라 · 주황)이 묻히지 않게 바탕은 거의 무채로 */
    background:
        radial-gradient(60% 80% at 82% 40%, rgba(240, 138, 36, .10) 0%, transparent 70%),
        radial-gradient(50% 70% at 12% 90%, rgba(15, 118, 110, .08) 0%, transparent 70%),
        linear-gradient(180deg, #fffaf2 0%, #f6f4ee 100%);
    border-bottom: 1px solid #ebe5d8;
    min-height: clamp(420px, 60vh, 640px);
    display: flex;
    align-items: center;
}

.he-hero-inner {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 64px 32px 70px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 40px;
    align-items: center;
}

.he-copy { min-width: 0; }

.he-slider { position: relative; min-height: 196px; width: 100%; }
.he-slide {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .5s ease, transform .5s ease;
    pointer-events: none;
}
.he-slide.is-on { opacity: 1; transform: none; pointer-events: auto; }

.he-eyebrow {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--he-teal);
}
.he-title { margin: 0; font-weight: 800; letter-spacing: -.03em; line-height: 1.18; text-wrap: balance; }
.he-title span { display: block; font-size: 38px; color: var(--he-sub); }
.he-title strong {
    display: inline;
    font-size: 52px;
    color: var(--he-ink);
    font-weight: 800;
    /* 형광펜 한 줄 — 하이 로고의 주황 */
    background: linear-gradient(transparent 62%, rgba(240, 138, 36, .30) 62%, rgba(240, 138, 36, .30) 92%, transparent 92%);
}

.he-dots { position: absolute; left: 0; bottom: 0; display: flex; gap: 8px; }
.he-dot {
    width: 26px; height: 4px;
    border: 0; padding: 0;
    border-radius: 999px;
    background: rgba(20, 35, 58, .16);
    cursor: pointer;
    transition: background .2s, width .2s;
}
.he-dot.is-on { background: var(--he-orange); width: 40px; }
.he-dot:focus-visible { outline: 2px solid var(--he-orange); outline-offset: 3px; }

.he-lede { margin: 26px 0 0; max-width: 34em; font-size: 17px; line-height: 1.6; color: var(--he-sub); }
.he-lede b { color: var(--he-ink); font-weight: 800; }

.he-points { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.he-points li {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px;
    border: 1px solid #e3dccd;
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    font-size: 13.5px; font-weight: 700; color: var(--he-ink);
}
.he-points i { color: var(--he-teal); }

/* 표지 부채꼴 — 가운데 권이 맨 앞, 양옆으로 기울며 물러난다 */
.he-fan {
    position: relative;
    display: block;
    height: 400px;
    text-decoration: none;
}
.he-cv {
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 160px;
    height: auto;
    aspect-ratio: 600 / 801;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(20, 35, 58, .10), 0 18px 36px rgba(20, 35, 58, .18);
    transform-origin: 50% 120%;
    /* 자리를 옮길 때(돌기 · 펼치기)는 transform, 둥실 뜨는 건 translate 로 — 둘이 서로 덮어쓰지 않는다 */
    transition: transform .9s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease;
    animation: heFloat 5.2s ease-in-out infinite;
}
.he-cv:nth-child(2) { animation-delay: -1.1s; }
.he-cv:nth-child(3) { animation-delay: -2.3s; }
.he-cv:nth-child(4) { animation-delay: -3.4s; }
.he-cv:nth-child(5) { animation-delay: -4.4s; }
.he-cv:nth-child(6) { animation-delay: -0.6s; }
.he-cv:nth-child(7) { animation-delay: -2.9s; }
@keyframes heFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* 자리 일곱 — 가운데(3)가 맨 앞. 문구가 넘어갈 때 JS 가 자리를 한 칸씩 돌린다 */
.he-pos-0 { z-index: 1; transform: translateX(-50%) translateX(-228px) rotate(-18deg); }
.he-pos-1 { z-index: 3; transform: translateX(-50%) translateX(-156px) rotate(-12deg); }
.he-pos-2 { z-index: 5; transform: translateX(-50%) translateX(-80px) rotate(-6deg); }
.he-pos-3 { z-index: 7; transform: translateX(-50%) translateY(-14px) scale(1.2); box-shadow: 0 2px 4px rgba(20, 35, 58, .10), 0 24px 44px rgba(20, 35, 58, .24); }
.he-pos-4 { z-index: 5; transform: translateX(-50%) translateX(80px) rotate(6deg); }
.he-pos-5 { z-index: 3; transform: translateX(-50%) translateX(156px) rotate(12deg); }
.he-pos-6 { z-index: 1; transform: translateX(-50%) translateX(228px) rotate(18deg); }
.he-fan:hover .he-pos-0 { transform: translateX(-50%) translateX(-252px) rotate(-21deg); }
.he-fan:hover .he-pos-1 { transform: translateX(-50%) translateX(-172px) rotate(-14deg); }
.he-fan:hover .he-pos-2 { transform: translateX(-50%) translateX(-90px) rotate(-7deg); }
.he-fan:hover .he-pos-3 { transform: translateX(-50%) translateY(-24px) scale(1.2); }
.he-fan:hover .he-pos-4 { transform: translateX(-50%) translateX(90px) rotate(7deg); }
.he-fan:hover .he-pos-5 { transform: translateX(-50%) translateX(172px) rotate(14deg); }
.he-fan:hover .he-pos-6 { transform: translateX(-50%) translateX(252px) rotate(21deg); }
/* 한 무더기로 쌓인 모습 — 처음 열 때, 그리고 문구가 넘어갈 때마다 잠깐(형아 2026-10-13 「쌓이고 펼쳐지는 형태」).
   책마다 조금씩 비뚤게 · 아래 책일수록 조금 아래로. 맨 앞(3)이 맨 위 */
.he-fan.is-stacked .he-cv { transition: transform .6s cubic-bezier(.5, 0, .2, 1), box-shadow .5s ease; }
.he-fan.is-instant .he-cv { transition: none; }
.he-fan.is-stacked .he-pos-0 { transform: translateX(-50%) translateX(-6px) translateY(30px) rotate(-5deg); }
.he-fan.is-stacked .he-pos-1 { transform: translateX(-50%) translateX(5px) translateY(24px) rotate(4deg); }
.he-fan.is-stacked .he-pos-2 { transform: translateX(-50%) translateX(-4px) translateY(18px) rotate(-3deg); }
.he-fan.is-stacked .he-pos-3 { transform: translateX(-50%) translateY(0) scale(1.08); }
.he-fan.is-stacked .he-pos-4 { transform: translateX(-50%) translateX(4px) translateY(12px) rotate(2deg); }
.he-fan.is-stacked .he-pos-5 { transform: translateX(-50%) translateX(-5px) translateY(6px) rotate(-2deg); }
.he-fan.is-stacked .he-pos-6 { transform: translateX(-50%) translateX(6px) translateY(3px) rotate(3deg); }
.he-fan:focus-visible { outline: 3px solid var(--he-orange); outline-offset: 6px; border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
    .he-slide, .he-cv { transition: none; }
    .he-cv { animation: none; }
}

/* 세로가 낮은 노트북(1366x768 등) — 첫 화면에 아래 교재 띠가 보이게 줄인다 */
@media (max-height: 820px) and (min-width: 901px) {
    .he-hero-inner { padding: 44px 32px 48px; }
    .he-slider { min-height: 172px; }
    .he-title span { font-size: 32px; }
    .he-title strong { font-size: 44px; }
    .he-fan { height: 330px; }
    .he-cv { width: 140px; }
}

@media (max-width: 1080px) {
    .he-cv { width: 140px; }
    .he-pos-0 { transform: translateX(-50%) translateX(-190px) rotate(-18deg); }
    .he-pos-1 { transform: translateX(-50%) translateX(-130px) rotate(-12deg); }
    .he-pos-2 { transform: translateX(-50%) translateX(-66px) rotate(-6deg); }
    .he-pos-4 { transform: translateX(-50%) translateX(66px) rotate(6deg); }
    .he-pos-5 { transform: translateX(-50%) translateX(130px) rotate(12deg); }
    .he-pos-6 { transform: translateX(-50%) translateX(190px) rotate(18deg); }
}

@media (max-width: 900px) {
    .he-hero { min-height: 0; }
    .he-hero-inner { grid-template-columns: 1fr; gap: 18px; padding: 40px 20px 36px; }
    .he-slider { min-height: 168px; }
    .he-title span { font-size: 28px; }
    .he-title strong { font-size: 38px; }
    .he-lede { font-size: 15.5px; }
    .he-fan { height: 280px; }
    .he-cv { width: 124px; }
}

@media (max-width: 640px) {
    .he-title span { font-size: 24px; }
    .he-title strong { font-size: 31px; }
    .he-slider { min-height: 150px; }
    .he-fan { height: 220px; }
    .he-cv { width: 92px; }
    .he-pos-0 { transform: translateX(-50%) translateX(-132px) rotate(-18deg); }
    .he-pos-1 { transform: translateX(-50%) translateX(-90px) rotate(-12deg); }
    .he-pos-2 { transform: translateX(-50%) translateX(-46px) rotate(-6deg); }
    .he-pos-4 { transform: translateX(-50%) translateX(46px) rotate(6deg); }
    .he-pos-5 { transform: translateX(-50%) translateX(90px) rotate(12deg); }
    .he-pos-6 { transform: translateX(-50%) translateX(132px) rotate(18deg); }
}

/* ----------------------------------------------------------------------
   로그인 모달 — /login 링크를 누르면 열린다.
   짝: resources/views/partials/login-modal.blade.php
   (히어로와 함께 첫 화면에서 쓰는 것이라 이 파일에 같이 둔다)
---------------------------------------------------------------------- */
.lg-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lg-modal[hidden] { display: none; }
.lg-dim { position: absolute; inset: 0; background: rgba(4, 20, 18, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.lg-panel {
    position: relative;
    width: 100%; max-width: 380px;
    background: #fff;
    border-radius: 14px;
    padding: 30px 28px 24px;
    box-shadow: 0 26px 70px rgba(3, 25, 22, .42);
    animation: lgIn .18s ease-out;
}
@keyframes lgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lg-panel { animation: none; } }

.lg-x {
    position: absolute; top: 12px; right: 12px;
    width: 34px; height: 34px;
    border: 0; border-radius: 8px;
    background: transparent; color: #64748b;
    font-size: 15px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.lg-x:hover { background: #f1f5f9; color: #0f172a; }

.lg-title { margin: 0 0 4px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: #0f172a; }
.lg-sub { margin: 0 0 18px; font-size: 13.5px; color: #64748b; }

.lg-form { display: flex; flex-direction: column; gap: 10px; }
.lg-field {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border: 1px solid #cbd5e1; border-radius: 8px;
    background: #fff;
    transition: border-color .12s, box-shadow .12s;
}
.lg-field:focus-within { border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15, 118, 110, .14); }
.lg-field i { color: #64748b; font-size: 16px; width: 17px; text-align: center; }
.lg-field input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; font-family: inherit; color: #0f172a; min-width: 0; }

.lg-submit {
    margin-top: 6px; width: 100%;
    padding: 13px; border: 0; border-radius: 8px;
    background: #0f766e; color: #fff;
    font-size: 16px; font-weight: 700; font-family: inherit;
    cursor: pointer; transition: background .12s;
}
.lg-submit:hover { background: #0b5d56; }

.lg-forgot { display: block; margin-top: 14px; text-align: center; font-size: 13px; color: #64748b; text-decoration: none; }
.lg-forgot:hover { color: #0f766e; text-decoration: underline; }

/* 로그인 실패 안내 — 아이디/비밀번호 오류, 승인 대기, 정지 계정 등 */
.lg-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 16px;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13.5px;
    line-height: 1.5;
}
.lg-error i { font-size: 15px; line-height: 1.4; flex-shrink: 0; }

/* ----------------------------------------------------------------------
   히어로 아래 교재 띠 — 블렌디움 9갈래를 앞표지로(2026-10-13).
   예전 어두운 초록 카드 다섯 장(.cnt-books)을 바꿨다. 칸마다 그 시리즈 표지 색을 옅게 깐다
   (하이에듀 첫 화면의 색 타일처럼 — 형아 「https://highedu.co.kr/ 참고」).
   짝: resources/views/intro.blade.php 의 <section class="bk-shelf">
---------------------------------------------------------------------- */
.bk-shelf { background: #fff; border-bottom: 1px solid #ece7dc; }
.bk-shelf-in {
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 32px 34px;
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)) minmax(0, 1.9fr);   /* 끝 칸 = 내신 변형문제(넓게) */
    gap: 12px;
}
.bk-it {
    --tint: #f4efe6; --deep: #5b4a2e;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 10px 14px;
    border-radius: 12px;
    background: var(--tint);
    text-decoration: none;
    color: var(--deep);
    text-align: center;
    transition: transform .25s cubic-bezier(.34, 1.5, .64, 1), box-shadow .25s ease;
}
.bk-it:hover { transform: translateY(-6px); box-shadow: 0 14px 26px rgba(20, 35, 58, .14); text-decoration: none; color: var(--deep); }
.bk-it:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; }
.bk-it img {
    width: 100%;
    max-width: 112px;
    height: auto;
    aspect-ratio: 600 / 801;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 35, 58, .12), 0 8px 16px rgba(20, 35, 58, .16);
}
.bk-it b { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.bk-it em { display: block; font-style: normal; font-size: 12px; font-weight: 600; opacity: .82; line-height: 1.35; margin-top: 3px; }

/* 시리즈 색 — 표지 띠 색을 아주 옅게 */
.bk-phonics    { --tint: #fdf3df; --deep: #8a5a12; }
.bk-reading    { --tint: #fdf0e6; --deep: #8b4513; }
.bk-voca       { --tint: #fbe9ea; --deep: #9b2c3a; }
.bk-grammar    { --tint: #f3eaf7; --deep: #6d2f86; }
.bk-skills     { --tint: #f1edf9; --deep: #5b3b97; }
.bk-sentence   { --tint: #fdeee2; --deep: #a2481a; }
.bk-listening  { --tint: #e6eff8; --deep: #1f4f7e; }
.bk-writing    { --tint: #fdeee6; --deep: #9a3d22; }
.bk-conv       { --tint: #fdf2dc; --deep: #8c5a08; }

@media (prefers-reduced-motion: reduce) { .bk-it { transition: none; } .bk-it:hover { transform: none; } }

/* 좁아지면 가로로 밀어 본다 — 아홉 칸을 억지로 접으면 표지가 너무 작아진다 */
@media (max-width: 1080px) {
    .bk-shelf-in {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 124px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 22px 20px 24px;
        scrollbar-width: thin;
    }
    .bk-it { scroll-snap-align: start; }
    .bk-naesin { grid-column: span 2; }
}

/* 첫 화면 머리띠 — 폰에서 「로그인 · 무료 체험 신청」이 화면 밖으로 밀렸다(2026-10-13).
   좁으면 아이콘을 빼고 버튼을 줄인다. intro 안 <style> 보다 뒤에 와도 이기게 한 단계 더 짚는다. */
@media (max-width: 520px) {
    header .hd-in { gap: 10px; }
    header .hd-in .logo { height: 30px; }
    header .hd-in .hd-act { gap: 6px; }
    header .hd-in .hd-act .btn { padding: 8px 11px; font-size: 13px; }
    header .hd-in .hd-act .btn i { display: none; }
}

/* 중등 내신 변형문제 칸 — 표지 대신 시험지, 주황 바탕 · NEW 로 띠에서 티 나게(형아 2026-10-13) */
.bk-naesin {
    position: relative;
    border: 0; font: inherit; cursor: pointer; width: 100%;
    background: linear-gradient(150deg, #ffa24a 0%, #f2711f 100%);
    color: #fff;
    box-shadow: 0 10px 22px rgba(242, 113, 31, .30);
}
.bk-naesin:hover { color: #fff; box-shadow: 0 16px 30px rgba(242, 113, 31, .38); }
.bk-naesin b { color: #fff; font-size: 15.5px; }
.bk-naesin em { color: #fff; opacity: .95; }
.bk-naesin:focus-visible { outline: 3px solid #14233a; outline-offset: 2px; }
.bk-new {
    position: absolute; top: 9px; right: 9px; z-index: 2;
    padding: 3px 8px; border-radius: 999px;
    background: #fff; color: #e0560f;
    font-size: 10.5px; font-weight: 900; letter-spacing: .06em;
    animation: bkNew 1.8s ease-in-out infinite;
}
@keyframes bkNew { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.bk-paper {
    display: flex; flex-direction: column; gap: 4px; overflow: hidden;
    width: 100%; max-width: 160px; aspect-ratio: 160 / 128;   /* 옆 표지와 높이를 맞춘다 */
    padding: 8px 10px; border-radius: 4px;
    background: #fff; color: #14233a; text-align: left;
    box-shadow: 0 1px 2px rgba(20, 35, 58, .14), 0 8px 16px rgba(120, 50, 0, .22);
    transform: rotate(-3deg);
    transition: transform .3s ease;
}
.bk-naesin:hover .bk-paper { transform: rotate(0deg) translateY(-2px); }
.bk-paper-h { display: block; padding-bottom: 5px; margin-bottom: 1px; border-bottom: 1.5px solid #14233a; font-size: 9.5px; font-weight: 800; white-space: nowrap; }
.bk-q { display: flex; align-items: center; gap: 5px; }
.bk-q i { flex-shrink: 0; width: 12px; font-style: normal; font-size: 9px; font-weight: 800; color: #f2711f; }
.bk-q .ln { flex: 1; height: 4px; border-radius: 2px; background: #e6e9ee; }
.bk-q.sh .ln { flex: 0 0 62%; }
.bk-opts { display: block; padding-left: 17px; font-size: 8.5px; letter-spacing: .12em; color: #8a94a3; }
@media (prefers-reduced-motion: reduce) { .bk-new { animation: none; } .bk-paper { transition: none; } }

/* 표지 띠 — 시리즈 이름 위 로고 글자(2026-10-14) */
.bk-it .bk-wm { display: block; width: 66px; height: 10px; max-width: none; aspect-ratio: auto; margin: 0 auto 4px; border-radius: 0; background: none; box-shadow: none; }   /* 표지 그림 규칙(.bk-it img)을 풀어 준다 */
@media (max-width: 1080px) { .bk-it .bk-wm { width: 59px; height: 9px; } }