@charset "utf-8";
/* ========================================================================== 
 * File    : gnb-allmenu-banner.css
 * Version : GNB_ALLMENU_BANNER_CSS-2026-04-27-r012
 * Updated : 2026-04-27 14:25:00
 * Author  : ChatGPT
 *
 * HISTORY
 * --------------------------------------------------------------------------
 * 2026-04-27 14:25:00 r012
 * - GNB 좌/우 book_cover 표지 위치를 single/stack-2 모두 right:20px, bottom:20px 기준으로 통일
 * - topBanner에는 영향 없이 #gnb_allmenu 좌/우 배너 전용 cover selector만 조정
 *
 * 2026-04-27 14:15:00 r011
 * - GNB book_cover 표지 transform을 DB 컬럼 cover_main_transform / cover_sub_transform으로 제어 가능하도록 CSS variable 적용
 * - cover_main_shadow / cover_sub_shadow도 CSS variable로 연결
 * - DB 값이 없으면 기존 r010 기본 rotate/shadow 유지
 *
 * 2026-04-27 13:45:00 r010
 * - GNB 좌/우 배너 3모드(image/text/book_cover) 명시 분기 대응
 * - text 타입은 cover_mode/cover_* 값이 있어도 교재표지 스타일 미적용
 * - book_cover 타입에서만 book_card/cover 스타일 적용
 * - book_cover 타입도 text theme/font/effect 스타일을 공유하도록 selector 호환 유지
 *
 * 2026-04-27 13:15:00 r009
 * - GNB 좌/우 book_card(교재카드형) 스타일 추가
 * - r009 당시 banner_style=text + cover_mode(single|stack-2) 조합 자동 교재카드 판별 대응
 * - 사용자 지정 텍스트형 dark background typography 반영
 * - theme별 미세 조정용 selector 구조 정리
 * - navigation-allmenu.css의 #gnb_allmenu 기본 selector보다 우선하도록 scope 강화
 *
 * 2026-04-26 21:18:00 r003
 * - GNB 전체메뉴 좌/우 배너 공통 스타일 최초 안정화
 * - image/text 배너 공통 프레임 추가
 * - topBanner cinematic flare 축소 이식
 * ========================================================================== */

#gnb_allmenu .gnb-allmenu-side{
    position:relative;
    flex:0 0 180px;
    width:180px;
    min-width:180px;
    align-self:stretch;
}

#gnb_allmenu .gnb-allmenu-banner{
    position:relative;
    display:block;
    width:180px;
    height:240px;
    min-height:240px;
    overflow:hidden;
    box-sizing:border-box;
    text-decoration:none;
    background-color:#ffffff;
    box-shadow:inset 1px 1px 2px 1px rgb(77 77 77 / 25%);
    isolation:isolate;
    transform:translateZ(0);
    transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

#gnb_allmenu .gnb-allmenu-banner:focus-visible{
    outline:3px solid rgba(37,99,235,.34);
    outline-offset:3px;
}

#gnb_allmenu .gnb-allmenu-banner--image{
    border:1px solid #dddddd;
    background-color:#ffffff;
}

#gnb_allmenu .gnb-allmenu-banner--image img,
#gnb_allmenu .gnb-allmenu-banner > img{
    position:relative;
    z-index:2;
    display:block;
    width:100%;
    height:100%;
    min-height:240px;
    object-fit:cover;
}

#gnb_allmenu .gnb-allmenu-banner__bg{
    position:absolute;
    inset:0;
    z-index:1;
    overflow:hidden;
    pointer-events:none;
    background:
        radial-gradient(circle at 50% 14%, rgba(255,255,255,.16) 0, rgba(255,255,255,0) 34%),
        radial-gradient(circle at 50% 94%, rgba(0,0,0,.12) 0, rgba(0,0,0,0) 32%);
    filter:brightness(1) contrast(1);
    transition:filter .22s ease;
}

#gnb_allmenu .gnb-allmenu-banner__bg::before,
#gnb_allmenu .gnb-allmenu-banner__bg::after,
#gnb_allmenu .gnb-allmenu-banner__flash{
    position:absolute;
    pointer-events:none;
    opacity:0;
    will-change:transform, opacity;
    mix-blend-mode:screen;
}

#gnb_allmenu .gnb-allmenu-banner__bg::before{
    content:'';
    top:-24%;
    left:-18%;
    width:72%;
    height:155%;
    z-index:1;
    border-radius:4px;
    transform-origin:center center;
    transform:translateX(-190%) rotate(-28deg);
    background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,.08) 34%, rgba(255,255,255,.42) 50%, rgba(255,255,255,.10) 66%, rgba(255,255,255,0) 82%, rgba(255,255,255,0) 100%);
    filter:blur(1px);
}

#gnb_allmenu .gnb-allmenu-banner__bg::after{
    content:'';
    top:0;
    right:0;
    width:3px;
    height:34%;
    z-index:2;
    transform:translateY(-135%);
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.94) 50%, rgba(255,255,255,0) 100%);
    filter:blur(.25px);
    box-shadow:0 0 7px rgba(255,255,255,.68), 0 0 14px rgba(255,255,255,.30);
}

#gnb_allmenu .gnb-allmenu-banner__flash{
    right:0;
    top:calc(100% - 3px);
    width:34%;
    height:3px;
    z-index:2;
    transform:translateX(130%);
    border-radius:999px;
    background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.94) 50%, rgba(255,255,255,0) 100%);
    filter:blur(.25px);
    box-shadow:0 0 8px rgba(255,255,255,.70), 0 0 16px rgba(255,255,255,.30);
}

/* --------------------------------------------------------------------------
 * explicit type mode
 * --------------------------------------------------------------------------
 * image      : .gnb-allmenu-banner--image
 * text       : .gnb-allmenu-banner--text
 * book_cover : .gnb-allmenu-banner--text + .gnb-allmenu-banner--book-card
 * -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * text banner base
 * -------------------------------------------------------------------------- */
#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text{
    position:relative;
    display:block;
    width:180px;
    height:240px;
    overflow:hidden;
    box-sizing:border-box;
    padding:22px 18px;
    border:0;
    color:#ffffff;
    text-decoration:none;
    box-shadow:
        inset 1px 1px 2px 1px rgb(77 77 77 / 25%),
        0 10px 22px rgba(15,23,42,.14);
}

#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text:hover,
#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text:focus{
    text-decoration:none;
}

#gnb_allmenu .gnb-allmenu-banner__copy{
    position:relative;
    z-index:3;
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
    margin-top:40px;
}

#gnb_allmenu .gnb-allmenu-banner__eyebrow{
    display:block;
    font-size:13px;
    font-weight:600;
    line-height:1.25;
    opacity:.92;
    text-shadow:0 1px 4px rgb(49 45 45 / 82%);
    color:#ffffff;
    word-break:keep-all;
}

#gnb_allmenu .gnb-allmenu-banner__title{
    display:block;
    font-size:24px;
    font-weight:800;
    line-height:1.18;
    letter-spacing:-.04em;
    text-shadow:0 1px 4px rgb(49 45 45 / 82%);
    color:#ffffffe0;
    word-break:keep-all;
}

#gnb_allmenu .gnb-allmenu-banner__lead{
    display:block;
    font-size:13px;
    font-weight:600;
    line-height:1.35;
    opacity:.94;
    text-shadow:0 1px 3px rgba(0,0,0,.24);
    color:#f3c612;
    word-break:keep-all;
}

#gnb_allmenu .gnb-allmenu-banner__badge{
    position:absolute;
    left:0;
    top:-40px;
    z-index:5;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    height:24px;
    padding:0 10px;
    border-radius:999px;
    box-sizing:border-box;
    font-size:12px;
    font-weight:900;
    line-height:1;
    letter-spacing:.01em;
    white-space:nowrap;
    color:#0f172a;
    background:rgba(255,255,255,.88);
    box-shadow:0 4px 12px rgba(0,0,0,.18);
}

#gnb_allmenu .gnb-allmenu-banner__badge--corner{transform:rotate(0deg);}
#gnb_allmenu .gnb-allmenu-banner__badge--pill{position:static;width:max-content;margin-top:2px;transform:none;}
#gnb_allmenu .gnb-allmenu-banner__badge--none{display:none;}

/* --------------------------------------------------------------------------
 * book_card / cover style
 * -------------------------------------------------------------------------- */
#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--book-card,
#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--book-cover,
#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--book_cover{
    padding:18px 16px;
}

#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--book-card .gnb-allmenu-banner__copy,
#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--book-cover .gnb-allmenu-banner__copy,
#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--book_cover .gnb-allmenu-banner__copy{
    z-index:4;
    width:118px;
    max-width:118px;
    margin-top:30px;
    gap:6px;
}

#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--book-card .gnb-allmenu-banner__eyebrow{
    font-size:12px;
    line-height:1.24;
}

#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--book-card .gnb-allmenu-banner__title{
    font-size:20px;
    line-height:1.16;
    letter-spacing:-.055em;
}

#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--book-card .gnb-allmenu-banner__lead{
    font-size:12px;
    line-height:1.32;
}

#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--book-card > .gnb-allmenu-banner__badge{
    left:16px;
    top:16px;
    z-index:7;
}

#gnb_allmenu .gnb-allmenu-side .gnb-allmenu-banner__cover{
    position:absolute;
    z-index:3;
    right:20px;
    bottom:20px;
    display:block;
    width:84px;
    height:116px;
    pointer-events:none;
}

#gnb_allmenu .gnb-allmenu-banner__cover-item,
#gnb_allmenu .gnb-allmenu-banner__cover-item picture,
#gnb_allmenu .gnb-allmenu-banner__cover-item img{
    display:block;
}

#gnb_allmenu .gnb-allmenu-banner__cover-item{
    position:absolute;
    left:0;
    bottom:0;
    width:78px;
}

#gnb_allmenu .gnb-allmenu-banner__cover-item img{
    width:100%;
    height:auto;
    min-height:0;
    object-fit:contain;
    border-radius:4px;
    box-shadow:var(--gnb-cover-img-shadow,
        0 8px 12px rgba(7,10,26,.18),
        0 16px 28px rgba(7,10,26,.22),
        0 30px 52px rgba(7,10,26,.22)
    );
}

#gnb_allmenu .gnb-allmenu-banner__cover--single .gnb-allmenu-banner__cover-item--main{
    transform:var(--gnb-cover-transform, rotate(4deg));
    transform-origin:50% 100%;
}

#gnb_allmenu .gnb-allmenu-side .gnb-allmenu-banner__cover--stack-2{
    width:100px;
    height:124px;
    right:20px;
    bottom:20px;
}

#gnb_allmenu .gnb-allmenu-banner__cover--stack-2 .gnb-allmenu-banner__cover-item{
    width:70px;
}

#gnb_allmenu .gnb-allmenu-banner__cover--stack-2 .gnb-allmenu-banner__cover-item--sub{
    left:22px;
    bottom:9px;
    z-index:1;
    transform:var(--gnb-cover-transform, rotate(12deg));
    opacity:.94;
}

#gnb_allmenu .gnb-allmenu-banner__cover--stack-2 .gnb-allmenu-banner__cover-item--main{
    left:2px;
    bottom:0;
    z-index:2;
    transform:var(--gnb-cover-transform, rotate(-7deg));
}

#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--book-card::after{
    content:'';
    position:absolute;
    z-index:2;
    right:-18px;
    bottom:-18px;
    width:128px;
    height:112px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(255,255,255,.22) 0, rgba(255,255,255,0) 65%);
    pointer-events:none;
}

/* --------------------------------------------------------------------------
 * theme base : topBanner theme key adapter
 * -------------------------------------------------------------------------- */
#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-royal-blue{
    background:
        radial-gradient(circle at 24% 16%, rgba(255,255,255,.24) 0, rgba(255,255,255,0) 36%),
        linear-gradient(135deg,#2454d6 0%,#4f90ff 100%);
}

#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-sky-mint{
    background:
        radial-gradient(circle at 24% 16%, rgba(255,255,255,.30) 0, rgba(255,255,255,0) 38%),
        linear-gradient(135deg,#1ca9a0 0%,#62d9c8 100%);
}

#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-coral-red{
    background:
        radial-gradient(circle at 24% 16%, rgba(255,255,255,.22) 0, rgba(255,255,255,0) 36%),
        linear-gradient(135deg,#d9445d 0%,#ff806a 100%);
}

#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-slate-navy{
    background:
        radial-gradient(circle at 24% 16%, rgba(255,255,255,.18) 0, rgba(255,255,255,0) 36%),
        linear-gradient(135deg,#1e293b 0%,#334155 100%);
}

#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-deep-indigo{
    background:
        radial-gradient(circle at 24% 16%, rgba(255,255,255,.20) 0, rgba(255,255,255,0) 36%),
        linear-gradient(135deg,#312e81 0%,#4f46e5 100%);
}

#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-plum-violet{
    background:
        radial-gradient(circle at 24% 16%, rgba(255,255,255,.20) 0, rgba(255,255,255,0) 36%),
        linear-gradient(135deg,#7e22ce 0%,#a855f7 100%);
}

#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-jade-mint{
    background:
        radial-gradient(circle at 24% 16%, rgba(255,255,255,.24) 0, rgba(255,255,255,0) 36%),
        linear-gradient(135deg,#0f766e 0%,#2dd4bf 100%);
}

#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-apricot-peach{
    background:
        radial-gradient(circle at 24% 16%, rgba(255,255,255,.36) 0, rgba(255,255,255,0) 38%),
        linear-gradient(135deg,#f97316 0%,#fdba74 100%);
}

#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-cream-sand{
    background:
        radial-gradient(circle at 24% 16%, rgba(255,255,255,.56) 0, rgba(255,255,255,0) 40%),
        linear-gradient(135deg,#d6b47a 0%,#f3dfb6 100%);
}

/* dark theme tuning */
#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-royal-blue .gnb-allmenu-banner__lead,
#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-slate-navy .gnb-allmenu-banner__lead,
#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-deep-indigo .gnb-allmenu-banner__lead,
#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-plum-violet .gnb-allmenu-banner__lead{color:#f3c612;}

#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-royal-blue .gnb-allmenu-banner__badge,
#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-slate-navy .gnb-allmenu-banner__badge,
#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-deep-indigo .gnb-allmenu-banner__badge,
#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-plum-violet .gnb-allmenu-banner__badge{color:#0f172a;background:rgba(255,255,255,.88);}

/* light/warm theme tuning */
#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-apricot-peach .gnb-allmenu-banner__eyebrow,
#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-cream-sand .gnb-allmenu-banner__eyebrow{color:rgba(64,38,20,.92);text-shadow:0 1px 2px rgba(255,255,255,.38);}

#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-apricot-peach .gnb-allmenu-banner__title,
#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-cream-sand .gnb-allmenu-banner__title{color:rgba(38,25,18,.92);text-shadow:0 1px 2px rgba(255,255,255,.42);}

#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-apricot-peach .gnb-allmenu-banner__lead,
#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-cream-sand .gnb-allmenu-banner__lead{color:#8a3a00;text-shadow:0 1px 2px rgba(255,255,255,.36);}

#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-apricot-peach .gnb-allmenu-banner__badge,
#gnb_allmenu .gnb-allmenu-banner.gnb-allmenu-banner--text.theme-cream-sand .gnb-allmenu-banner__badge{color:#ffffff;background:rgba(40,28,18,.82);}

@media (hover:hover) and (pointer:fine){
    #gnb_allmenu .gnb-allmenu-banner:hover,
    #gnb_allmenu .gnb-allmenu-banner:focus-visible{transform:translateY(-2px) translateZ(0);box-shadow:0 16px 28px rgba(15,23,42,.16), 0 4px 10px rgba(15,23,42,.10);}
    #gnb_allmenu .gnb-allmenu-banner:hover .gnb-allmenu-banner__bg,
    #gnb_allmenu .gnb-allmenu-banner:focus-visible .gnb-allmenu-banner__bg{filter:brightness(1.05) contrast(1.03);}
    #gnb_allmenu .gnb-allmenu-banner.effect-cinematic_flare:hover .gnb-allmenu-banner__bg::before,
    #gnb_allmenu .gnb-allmenu-banner.effect-cinematic-flare:hover .gnb-allmenu-banner__bg::before,
    #gnb_allmenu .gnb-allmenu-banner.effect-cinematic_flare:focus-visible .gnb-allmenu-banner__bg::before,
    #gnb_allmenu .gnb-allmenu-banner.effect-cinematic-flare:focus-visible .gnb-allmenu-banner__bg::before{animation:gnbBannerFlareSweep .34s cubic-bezier(.22,.61,.36,1) .05s forwards;}
    #gnb_allmenu .gnb-allmenu-banner.effect-cinematic_flare:hover .gnb-allmenu-banner__bg::after,
    #gnb_allmenu .gnb-allmenu-banner.effect-cinematic-flare:hover .gnb-allmenu-banner__bg::after,
    #gnb_allmenu .gnb-allmenu-banner.effect-cinematic_flare:focus-visible .gnb-allmenu-banner__bg::after,
    #gnb_allmenu .gnb-allmenu-banner.effect-cinematic-flare:focus-visible .gnb-allmenu-banner__bg::after{animation:gnbBannerRightEdge .16s ease-out .38s forwards;}
    #gnb_allmenu .gnb-allmenu-banner.effect-cinematic_flare:hover .gnb-allmenu-banner__flash,
    #gnb_allmenu .gnb-allmenu-banner.effect-cinematic-flare:hover .gnb-allmenu-banner__flash,
    #gnb_allmenu .gnb-allmenu-banner.effect-cinematic_flare:focus-visible .gnb-allmenu-banner__flash,
    #gnb_allmenu .gnb-allmenu-banner.effect-cinematic-flare:focus-visible .gnb-allmenu-banner__flash{animation:gnbBannerBottomEdge .18s ease-out .54s forwards;}
}

@keyframes gnbBannerFlareSweep{0%{opacity:0;transform:translateX(-190%) rotate(-28deg);}16%{opacity:.9;}84%{opacity:.72;}100%{opacity:0;transform:translateX(230%) rotate(-28deg);}}
@keyframes gnbBannerRightEdge{0%{opacity:0;transform:translateY(-135%);}14%{opacity:1;}82%{opacity:.88;}100%{opacity:0;transform:translateY(310%);}}
@keyframes gnbBannerBottomEdge{0%{opacity:0;transform:translateX(130%);}14%{opacity:1;}82%{opacity:.86;}100%{opacity:0;transform:translateX(-310%);}}

@media all and (max-width:991px){#gnb_allmenu .gnb-allmenu-side{display:none !important;}}
@media (prefers-reduced-motion:reduce){#gnb_allmenu .gnb-allmenu-banner,#gnb_allmenu .gnb-allmenu-banner__bg,#gnb_allmenu .gnb-allmenu-banner__bg::before,#gnb_allmenu .gnb-allmenu-banner__bg::after,#gnb_allmenu .gnb-allmenu-banner__flash{animation:none !important;transition:none !important;}}