@charset "utf-8";

/*─────────────────────────────────────────────────────────
    Base / Layout
─────────────────────────────────────────────────────────*/
    #wrap{position:relative; overflow-x:clip;}
    .w_custom{position: relative; width: calc(100% - 60px); max-width: 1300px; margin-inline: auto;}
    #container{padding-bottom:var(--row-gap140);}
    #container:has(.site-main){padding:0;}
    #container:has(.full-sec){width: 100%; max-width:100%;}
    #container:has(.pd-dn){padding-bottom:0;}
    .ofc{overflow:hidden;}
    .ofc img{width:100% !important;height:100% !important;object-fit:cover !important;}

    @media (max-width:1600px) {
        br.for_pc{display: none;}
    }
    @media (max-width:1023px) {
        br.for_tm{display: none;}
    }
    @media (max-width:860px) {
        .w_custom{width: calc(100% - 30px);}
    }
    @media (max-width:320px) {
        .w_custom{width: calc(100% - 20px);}
    }

    @media (max-width:768px){
        .wrap{padding-inline:var(--col-gap20);}
    }
    @media (max-width:1100px){
        .wrap{padding-inline:var(--col-gap20);}
    }

    /* 스크롤바 (검정) */
        html{scrollbar-color:var(--black-color01) var(--gray-bg07); scrollbar-width:thin;}
        ::-webkit-scrollbar{width:3px;}
        ::-webkit-scrollbar-track{background:var(--gray-bg07);}
        ::-webkit-scrollbar-thumb{background:var(--black-color01); border-radius:9999px;}

        /* over */
        @media (hover:hover) and (pointer:fine){
            ::-webkit-scrollbar-thumb:hover{background:var(--black-color00);}
        }

    /* 화면에서 숨기되 스크린리더에는 노출 (접근성) */
        .blind{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;}

    /* 스크롤 등장 효과 */
        .reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.22,.9,.3,1), transform .7s cubic-bezier(.22,.9,.3,1);}
        .reveal.in-view{opacity:1; transform:none;}
        .card-grid .reveal:nth-child(2){transition-delay:.08s;}
        .card-grid .reveal:nth-child(3){transition-delay:.16s;}
        @media (prefers-reduced-motion:reduce){
            .reveal{opacity:1; transform:none; transition:none;}
        }

    /* skip navigation */
        .skip-nav a{position:absolute; left:50%; top:0; translate:-50% -120%; z-index:9999; display:inline-block; padding:var(--row-gap10) var(--col-gap24); background:var(--point-color01); color:var(--point-white); font-weight:700; border-radius:0 0 clamp(4px, 0.56vw, 8px) clamp(4px, 0.56vw, 8px); transition:translate .2s;}
        .skip-nav a:focus{translate:-50% 0;}

/*─────────────────────────────────────────────────────────
    공통 버튼
─────────────────────────────────────────────────────────*/
    .btn{display:inline-flex; align-items:center; justify-content:center; gap:clamp(7px, 0.56vw, 8px); padding:clamp(11px, 0.90vw, 13px) clamp(25px, 1.94vw, 28px); height:48px; border-radius:9999px; font-weight:600; font-size:var(--text-16); letter-spacing:-.2px; transition:background .2s, color .2s, box-shadow .2s, transform .2s;}
    .btn svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .2s;}
    .btn.primary{background:var(--point-color01); color:var(--point-white);}
    .btn.ghost{background:var(--point-white); color:var(--black-color01); box-shadow:inset 0 0 0 1px var(--gray-bg07);}

    /* over */
    @media (hover:hover) and (pointer:fine){
        .btn.primary:hover{background:var(--point-color02); box-shadow:0 8px 20px rgba(27,46,89,.25);}
        .btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--point-color01); color:var(--point-color01);}
        .btn:hover svg{transform:translateX(3px);}
    }

/*─────────────────────────────────────────────────────────
    공통 섹션 헤드
─────────────────────────────────────────────────────────*/
.sec-head{margin-bottom:var(--row-gap30);}
.sec-head.with-more{display:flex; justify-content:space-between; align-items:flex-end; gap:var(--col-gap24); flex-wrap:wrap;}
.sec-head .kicker{display:block; font-size:var(--text-14); font-weight:600; color:var(--point-color04); letter-spacing:0; margin-bottom:clamp(10px, 0.83vw, 12px);}
.sec-head h2{font-family:'Inter','Pretendard',sans-serif; font-size:var(--text-34); font-weight:600; letter-spacing:-1.2px; line-height:1.15; color:var(--black-color01);}
.sec-head .sec-desc{margin-top:clamp(12px, 0.97vw, 14px); font-size:var(--text-16); color:var(--black-color13); line-height:1.6;}

.more-link{display:inline-flex; align-items:center; gap:clamp(7px, 0.56vw, 8px); font-size:var(--text-15); font-weight:600; color:var(--black-color01); white-space:nowrap; transition:color .2s, gap .2s;}
.more-link::after{content:'+'; font-size:var(--text-20); font-weight:400; line-height:1;}

/* over */
@media (hover:hover) and (pointer:fine){
    .more-link:hover{color:var(--point-color01); gap:clamp(10px, 0.83vw, 12px);}
}

@media (max-width:1100px){
    .sec-head h2{font-size:var(--text-34);}
}
@media (max-width:768px){
    .sec-head h2{font-size:var(--text-28); letter-spacing:-.8px;}
}
@media (max-width:1100px){
    .sec-head h2{font-size:var(--text-28); letter-spacing:-.8px;}
}

/*─────────────────────────────────────────────────────────
    Header / GNB (화이트 캔버스 · Cal.com)
─────────────────────────────────────────────────────────*/
    .header{position:sticky; top:0; z-index:100; background:var(--point-white);transition:box-shadow .25s;}
    .header.on{box-shadow:0 0 10px 0 rgba(0,0,0,0.08);}
    .header .wrap{max-width:calc(1300px + 64px);}
    .header-inner{position:relative; display:flex; align-items:center; height:76px; justify-content:space-between; gap:var(--col-gap24);}
    .header-left{display:flex; align-items:center;flex-shrink:0;}
    .header-left nav{position:absolute; left:50%; top:0; transform:translateX(-50%); height:100%; display:flex; align-items:center;}
    .header .gnb{display:flex; gap:clamp(3px, 0.28vw, 4px);}
    .header .gnb>li{position: relative;}
    .header .gnb>li> a{display:flex; align-items:center; height:76px; padding:0 clamp(10px, 2vw, 30px);font-size:var(--text-17);font-weight:500; color:var(--black-color12); letter-spacing:-.2px; white-space:nowrap; position:relative;transition:color .2s;}
    .header .gnb>li> a::after{content:''; position:absolute; left:30px; right:30px; bottom:-1px; height:2px; background:var(--point-color01); transform:scaleX(0); transform-origin:center; transition:transform .28s ease;}
    .header .gnb>li.on> a{color:var(--point-color01);}
    .header .gnb .dep02{position: absolute;top:calc(100% - 10px);background:var(--point-color01);border-radius:var(--radius-10);left:50%;translate:-50%;display: flex;flex-direction: column;gap:10px;width:150px;padding:var(--row-gap20) 0;opacity:0;pointer-events:none;transition:all 0.3s;}
    .header .gnb .dep02 li a{display: block;font-size:var(--text-16);color:var(--point-white);font-weight:400;padding-inline:var(--row-gap10);text-align: center;}
    .header .gnb .dep03{display: none;}
    .h-actions{display:flex; align-items:center; gap:var(--row-gap10);}

    /* 언어 선택 드롭다운 */
    .lang-select{position:relative; width:150px;}
    .lang-toggle{display:inline-flex; align-items:center; gap:clamp(6px, 0.49vw, 7px); width:100%; height:40px; padding:0 clamp(14px, 1.11vw, 16px); border:1px solid var(--gray-bg07); border-radius:9999px; background:var(--point-white); font-size:var(--text-14); font-weight:600; color:var(--black-color12); letter-spacing:-.2px; transition:border-color .18s, color .18s;}
    .lang-toggle .lang-globe{width:17px; height:17px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.6;}
    .lang-toggle .lang-current{flex:1; text-align:left;}
    .lang-toggle .lang-caret{width:11px; height:7px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s;}
    .lang-toggle[aria-expanded="true"] .lang-caret{transform:rotate(180deg);}
    .lang-toggle[aria-expanded="true"]{border-color:var(--point-color01); color:var(--point-color01);}
    .lang-list{position:absolute; top:calc(100% + 8px); left:0; width:100%; background:var(--point-white); border:1px solid var(--gray-bg07); border-radius:clamp(4px, 0.56vw, 8px); box-shadow:0 8px 24px rgba(0,0,0,.1); padding:clamp(5px, 0.42vw, 6px); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s, visibility .18s, transform .18s; z-index:60;}
    .lang-select.open .lang-list{opacity:1; visibility:visible; transform:translateY(0);}
    .lang-list a{display:block; padding:clamp(8px, 0.63vw, 9px) clamp(10px, 0.83vw, 12px); border-radius:6px; font-size:var(--text-14); font-weight:500; color:var(--black-color12); transition:background .15s, color .15s;}

    .login-select{position:relative;}
    .login_link{display: flex;align-items: center;gap:var(--row-gap10);}
    .login_link a{display:inline-flex; align-items:center; height:40px; padding:0 var(--col-gap22); border-radius:9999px; background:var(--point-color01); color:var(--point-white); font-size:var(--text-14); font-weight:600; letter-spacing:-.2px; transition:background .2s;}

    /* 640px 이하에서만 쓰는 로그인 토글 버튼 — 그 위에서는 숨김 */
    .login-toggle{display:none; width:42px; height:42px; align-items:center; justify-content:center; border-radius:10px; background:transparent; border:0; color:var(--black-color01); transition:background .2s, color .2s;}
    .login-toggle svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
    .login-toggle[aria-expanded="true"]{background:var(--gray-bg06); color:var(--point-color01);}

    .mobile-toggle{display:none; width:42px; height:42px; align-items:center; justify-content:center; flex-direction:column; gap:clamp(4px, 0.35vw, 5px); background:transparent; border:0;}
    .mobile-toggle span{width:22px; height:2px; background:var(--black-color01); border-radius:2px; transition:all .2s;}

    /* 카테고리(전체메뉴) 아이콘 버튼 */
    .mobile-toggle{display:none; width:42px; height:42px; align-items:center; justify-content:center; border-radius:10px; background:transparent; border:0; color:var(--black-color01); transition:background .2s, color .2s;}
    .mobile-toggle svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round;}
    .mobile-toggle[aria-expanded="true"]{background:var(--gray-bg06); color:var(--point-color01);}

    /* 모바일 전체메뉴 오버레이 */
    .allmenu{position:fixed; inset:0; background:var(--point-white); z-index:200; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; overflow-y:auto;}
    .allmenu.open{opacity:1; visibility:visible;}
    .allmenu-head{display:flex; justify-content:space-between; align-items:center; height:76px; padding:0 var(--col-gap20); border-bottom:1px solid var(--gray-bg07);}
    .allmenu-head-actions{display:flex; align-items:center; gap:clamp(10px, 0.83vw, 12px);}
    .allmenu-close{width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:transparent; border:0; color:var(--black-color01); transition:background .2s;}
    .allmenu-close svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round;}
    .allmenu-body{padding:var(--row-gap20) var(--col-gap20) var(--row-gap60);}
    .allmenu-body nav > ul > li > a{display:block; padding:clamp(16px, 1.25vw, 18px) clamp(3px, 0.28vw, 4px); font-size:var(--text-20); font-weight:600; color:var(--black-color01); letter-spacing:-.4px; border-bottom:1px solid var(--gray-bg05); transition:color .18s, padding-left .18s;}
    .allmenu-body .dep02{background:var(--gray-bg01);margin:var(--row-gap20) 0;display: flex;flex-direction: column;gap:var(--row-gap10);padding:var(--row-gap20) 0;border-radius:var(--radius-10);}
    .allmenu-body .dep02 li a{font-size:var(--text-16);font-weight:500;color:var(--black-color01);display: block;padding-inline:var(--row-gap20);}
    .allmenu-body .dep03{margin-top:var(--row-gap10);display: flex;flex-direction: column;gap:var(--row-gap10);}
    .allmenu-body .dep03 li a{font-size:var(--text-15);font-weight:500;color:var(--black-color05);display: block;padding-inline:var(--row-gap30);}

    .allmenu-actions{margin-top:clamp(28px, 2.22vw, 32px);}
    .allmenu-actions .login_link{gap:var(--row-gap10);justify-content: center;}
    .allmenu-actions .login_link a{height:52px; justify-content:center; font-size:var(--text-16);}

        /* over */
        @media (hover:hover) and (pointer:fine){
            .header .gnb>li> a:hover{color:var(--point-color01);}
            .header .gnb>li> a:hover::after{transform:scaleX(1);}
            .header .gnb>li:hover .dep02{opacity:1;pointer-events:initial;}
            .lang-toggle:hover{border-color:var(--point-color01); color:var(--point-color01);}
            .lang-list a:hover{background:var(--gray-bg06); color:var(--point-color01);}
            .login_link a:hover{background:var(--point-color02);}
            .mobile-toggle:hover{background:var(--gray-bg06); color:var(--point-color01);}
            .allmenu-close:hover{background:var(--gray-bg06);}
            .allmenu-body nav > ul > li > a:hover{color:var(--point-color01); padding-left:var(--row-gap10);}
        }

        @media (max-width:1023px){
            .header .gnb{display:none;}
            .mobile-toggle{display:flex;}
            .header-inner{height:64px;}
            .allmenu-head{height:64px;}
        }
        @media (max-width:640px){
            #header .login-toggle{display:flex;}
            #header .login_link{display:none; position:absolute; top:calc(100% + 8px); right:50%;translate:50%;flex-direction:column; align-items:stretch; gap:clamp(6px, 0.83vw, 8px); background:var(--point-white); border:1px solid var(--gray-bg07); border-radius:clamp(8px, 1.11vw, 12px); box-shadow:0 8px 24px rgba(0,0,0,.1); padding:clamp(10px, 1.39vw, 14px); z-index:60; min-width:110px;}
            #header .login-select.open .login_link{display:flex;}
            #header .login_link a{justify-content:center;padding-inline:10px;}
            .lang-select{width: auto;}
            .lang-list a{padding-inline:0;}
        }


/*─────────────────────────────────────────────────────────
    메인 비주얼 (Hero · 캐러셀)
─────────────────────────────────────────────────────────*/
    .hero {position: relative;width: 100%;overflow: hidden;color: var(--point-white);}
    .hero .swiper-slide {height:clamp(450px, 70vw, 700px);display: flex;align-items: center;overflow: hidden;}
    .hero-slide-media{width:100%;height:100%;position: absolute;top:0;left:0;inset:0;}
    .hero .swiper-slide.hero-slide-offset .hero-slide-media img { object-position: center 62%; }
    .hero .swiper-slide-active .hero-slide-media img { animation: heroZoom 6.5s ease forwards; }
    @keyframes heroZoom { from { transform: scale(1.05) } to { transform: scale(1.13) } }
    @media (prefers-reduced-motion: reduce) {
        .hero .swiper-slide-active .hero-slide-media img { animation: none; }
    }

    .hero-slide-media::after {content: '';position: absolute;inset: 0;background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.32) 45%, rgba(0,0,0,.64) 100%);}
    .hero-content {position: relative;z-index: 3;padding:var(--row-gap120) 0 var(--row-gap80);}
    .hero .hero-tag { display: inline-block; font-size: var(--text-14); font-weight: 600; color: rgba(255,255,255,.85); letter-spacing: -.2px; padding: clamp(6px, 0.49vw, 7px) clamp(12px, 0.97vw, 14px); background: rgba(255,255,255,.14); border-radius: 9999px; margin-bottom: var(--col-gap24); }
    .hero .hero-title {font-size: clamp(38px,5vw,64px); font-weight: 600; line-height: 1.15; letter-spacing: -2px; margin-bottom: clamp(19px, 1.53vw, 22px); }
    .hero .hero-title em { font-style: normal; color: var(--point-white); }
    .hero .hero-desc { font-size: var(--text-19); color: rgba(255,255,255,.86); line-height: 1.6; margin-bottom: clamp(32px, 2.5vw, 36px); }
    .hero-content .btn { height:clamp(44px, 5vw, 56px); padding: 0 var(--col-gap40); font-size: var(--text-18); }

    /* 애니메이션 */
    .hero-content.is-animating .hero-title { animation: heroReveal 1s cubic-bezier(.22,.9,.3,1) .1s backwards; }
    .hero-content.is-animating .hero-desc { animation: heroReveal 1s cubic-bezier(.22,.9,.3,1) .28s backwards; }
    .hero-content.is-animating .btn { animation: heroReveal 1s cubic-bezier(.22,.9,.3,1) .46s backwards; }
    @keyframes heroReveal { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
    .hero .btn.primary{background:var(--point-white); color:var(--point-color01);}
    .hero .btn.ghost{background:rgba(255,255,255,.1); color:var(--point-white); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);}

    /* over */
    @media (hover:hover) and (pointer:fine){
        .hero .btn.primary:hover{background:var(--point-color01);color:var(--point-white)}
        .hero .btn.ghost:hover{background:var(--point-white); color:var(--point-color01); box-shadow:inset 0 0 0 1px var(--point-white);}
    }

    .hero-prev,.hero-next{position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:50px; height:50px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:var(--point-white); opacity:0; transition:background .2s, opacity .25s;}
    .hero-prev:focus-visible,.hero-next:focus-visible{opacity:.9;}
    .hero-prev svg,.hero-next svg{width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
    .hero-prev{left:24px;}
    .hero-next{right:24px;}

    @media (hover:hover) and (pointer:fine){
        .hero:hover .hero-prev,.hero:hover .hero-next{opacity:.9;}
        .hero-prev:hover,.hero-next:hover{background:rgba(255,255,255,.3); opacity:1;}
    }

    .hero-controls{position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(30px, 8vw, 92px);display:flex; justify-content:flex-end; align-items:center; gap:clamp(12px, 0.97vw, 14px); z-index:3; pointer-events:none;}
    .hero-controls .hero-dots{pointer-events:auto;}
    .hero-dots{display:flex; align-items:center; gap:clamp(8px, 0.63vw, 9px); --swiper-pagination-bullet-horizontal-gap:0;}
    .hero-dots .swiper-pagination-bullet{width:10px; height:10px; background:var(--point-white); opacity:.4; border-radius:50%; transition:background .2s, width .2s, border-radius .2s, opacity .2s;}
    .hero-dots .swiper-pagination-bullet-active{opacity:1; width:26px; border-radius:6px;}

    @media (max-width:1500px){

    }
    @media (max-width:1500px){
        .hero-prev,.hero-next{display:none;}
    }
    @media (max-width: 768px) {
        .hero-content br {display: none;}
    }
    @media (max-width:640px) {
        .hero .swiper-slide{align-items: flex-start;}
    }

/*─────────────────────────────────────────────────────────
    퀵메뉴 바 (컬러 퀵메뉴)
─────────────────────────────────────────────────────────*/
    .quick{position:relative; z-index:5; margin-top:calc(var(--row-gap60) * -1); padding:0;}
    .quick-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px, 1.25vw, 18px);}
    .quick-grid li{position:relative; padding:clamp(20px, 2.2vw, 24px) clamp(15px, 2.3vw, 26px);border-radius:clamp(6px, 0.83vw, 12px); color:var(--point-white); overflow:hidden; transition:transform .25s, box-shadow .25s;}       
        .qcell-green{background:var(--point-color03); color:var(--point-white);}
        .qcell-orange{background:var(--point-color05);}
        .qcell-navy{background:var(--point-color01);}
        .qcell-purple{background:var(--point-color06);}
    .quick-grid li a{display:flex; align-items:center; gap:var(--row-gap15);height:100%;}
    .qcell .q-ic{display:grid; place-items:center; width:clamp(36px, 4.2vw, 46px);aspect-ratio:auto 1;flex-shrink:0; border-radius:var(--radius-20); background:rgba(255,255,255,.22); font-size:var(--text-22); font-weight:700;}
        .qcell .q-ic svg{width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
    .qcell-green .q-ic{background:rgba(27,46,89,.14);}
    .qcell-green .q-ic svg{stroke:var(--point-white);}
    .qcell .q-body{display:flex; flex-direction:column; gap:clamp(3px, 0.28vw, 4px);}
    .qcell .q-body strong{font-size:var(--text-21); font-weight:700; letter-spacing:-.5px;}
    .qcell .q-body span{font-size:clamp(13px, 1.08vw, 15.5px); font-weight:500; opacity:.9;}
    .qcell .q-arrow{position:absolute; right:22px; top:22px; font-size:var(--text-18); opacity:.7; transition:transform .25s; transform:rotate(-45deg);}

    /* over */
    @media (hover:hover) and (pointer:fine){
        .quick-grid li:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.14);}
        .quick-grid li:hover .q-arrow{transform:rotate(-45deg) translateX(4px);}
    }

    @media (max-width:1023px) {
        .quick{margin-top:var(--row-gap60);}
        .quick-grid{grid-template-columns:repeat(2,1fr);}
        .quick-grid li{padding-block:var(--row-gap50);}
    }
    @media (max-width:640px) {
        .quick-grid{grid-template-columns:repeat(1,1fr);}
        .qcell .q-arrow{top:10px;right:10px;}
    }
    

/*─────────────────────────────────────────────────────────
    내 대시보드
─────────────────────────────────────────────────────────*/
    .dash{padding:var(--row-gap80) 0; margin:0;}
    .dash-grid{display:grid; grid-template-columns:1.35fr 1fr; gap:var(--row-gap20);}
    .widget{background:var(--gray-bg01); border-radius:clamp(6px, 0.83vw, 12px); padding:clamp(28px, 2.22vw, 32px);}
    .widget-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--col-gap24);}
    .widget-head h3{font-size:var(--text-23); font-weight:600; color:var(--black-color01); letter-spacing:-.4px;}
    .widget-more{display:inline-flex; align-items:center; gap:clamp(3px, 0.28vw, 4px); font-size:var(--text-15); font-weight:600; color:var(--black-color13); transition:color .18s;}
    .widget-more svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s;}

    /* over */
    @media (hover:hover) and (pointer:fine){
        .widget-more:hover{color:var(--point-color01);}
        .widget-more:hover svg{transform:translateX(3px);}
    }

    .dash-cta{display:flex; flex-direction:column; align-items:center; gap:var(--row-gap20); padding:clamp(50px, 3.89vw, 56px) clamp(28px, 2.22vw, 32px); background:var(--gray-bg01); border-radius:clamp(6px, 0.83vw, 12px); text-align:center;}
    .dash-cta-text{font-size:var(--text-17); color:var(--black-color12);}
    .dash-cta-btn{padding:0 var(--col-gap40);}

    .widget-consult{background:var(--point-white);border:2px solid var(--point-color01);}

    .widget-study{background:var(--point-white); border:1px solid var(--gray-bg07);}

    .stepper{display:flex; align-items:center; min-height:152px; background:var(--gray-bg01); border-radius:clamp(6px, 0.83vw, 12px); padding:clamp(25px, 1.94vw, 28px); margin:clamp(10px, 0.83vw, 12px) 0 clamp(19px, 1.53vw, 22px);}
    .step{position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:clamp(10px, 0.83vw, 12px);}
    .step::before{content:''; position:absolute; top:21px; right:50%; width:100%; height:3px; background:#dfe3ea; border-radius:2px;}
    .step:first-child::before{display:none;}
    .step.is-done::before,.step.is-current::before{background:var(--point-color01);}
    .step-dot{position:relative; z-index:1; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--border-color01); border:2px solid transparent; color:var(--black-color13); font-size:var(--text-16); font-weight:700; transition:all .2s;}
    .step-dot svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;}
    .step.is-done .step-dot{background:var(--point-color01); border-color:var(--point-color01); color:var(--point-white);}
    .step.is-current .step-dot{background:var(--point-white); border-color:var(--point-color05); color:var(--point-color05); box-shadow:0 0 0 5px rgba(232,130,30,.16);}
    .step.is-current .step-dot::after{content:''; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--point-color05); opacity:.5; animation:stepPulse 1.8s ease-out infinite;}
    @keyframes stepPulse{0%{transform:scale(1); opacity:.5;}70%{transform:scale(1.35); opacity:0;}100%{opacity:0;}}
    @media (prefers-reduced-motion:reduce){.step.is-current .step-dot::after{animation:none;}}
    .step-label{font-size:var(--text-14); font-weight:600; color:var(--black-color13);}
    .step.is-done .step-label{color:var(--point-color01);}
    .step.is-current .step-label{color:var(--point-color05);}
    .widget-note{font-size:var(--text-17); color:var(--black-color12); margin-top:clamp(19px, 1.53vw, 22px); text-align:center;}

    /* 상담 상태 (박스 아래 라인 없이 배지로 표현) */
    .consult-status{display:flex; flex-direction:column;}
    .consult-status .cs-item a{display:flex; align-items:center; justify-content:space-between; gap:clamp(10px, 0.83vw, 12px); padding:clamp(12px, 0.97vw, 14px) 0; border-bottom:1px solid var(--gray-bg05); transition:color .18s, padding-left .18s;}
    .consult-status .cs-item:last-child a{border-bottom:0; padding-bottom:0;}
    .consult-status .cs-item:first-child a{padding-top:0;}
    .consult-status .cs-ti{flex:1; min-width:0; font-size:var(--text-16); font-weight:500; color:var(--black-color12); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    .status-badge{display:inline-flex; align-items:center; flex-shrink:0; height:30px; padding:0 clamp(14px, 1.11vw, 16px); border-radius:9999px; font-size:var(--text-13); font-weight:700; color:var(--point-white); white-space:nowrap;}
    .status-badge.new{background:var(--point-color07);}
    .status-badge.proc{background:var(--point-color05);}
    .status-badge.done{background:var(--point-color03);}
    .consult-status .cs-item.cs-empty{padding:clamp(12px, 0.97vw, 14px) 0; font-size:var(--text-16); color:var(--black-color14);}

    /* over */
    @media (hover:hover) and (pointer:fine){
        .consult-status .cs-item a:hover{color:var(--point-color01); padding-left:clamp(7px, 0.56vw, 8px);}
    }

    /* 학습 진도 — 단어장 · 모의고사 분리 카드 */
    .progress{display:flex; flex-direction:column; justify-content:center; gap:clamp(14px, 1.11vw, 16px); min-height:152px; background:transparent; border-radius:0; padding:0;}
    .progress-row{display:grid; grid-template-columns:64px 1fr 72px; align-items:center; gap:clamp(12px, 0.97vw, 14px); background:var(--gray-bg01); border-radius:clamp(6px, 0.83vw, 12px); padding:clamp(19px, 1.53vw, 22px) var(--col-gap24);}
    .progress-label{font-size:var(--text-16); font-weight:600; color:var(--black-color01); white-space:nowrap;}
    .progress-track{height:10px; border-radius:9999px; background:var(--border-color01); overflow:hidden;}
    .progress-fill{display:block; height:100%; width:var(--val); border-radius:9999px; background:var(--point-color03); transform-origin:left center; animation:fillRight 1.1s cubic-bezier(.22,.9,.3,1) both;}
    .progress-fill--orange{background:var(--point-color05);}
    @keyframes fillRight{from{width:0;}}
    @media (prefers-reduced-motion:reduce){.progress-fill{animation:none;}}
    .progress-val{font-size:var(--text-14); font-weight:600; color:var(--black-color13); white-space:nowrap; text-align:right;}
    .pt-green{color:var(--point-color03); font-weight:700;}
    .pt-orange{color:var(--point-color05); font-weight:700;}

    @media (max-width:1100px){
        .dash-grid{grid-template-columns:1fr;}
        .widget{padding:var(--col-gap24) var(--col-gap20);}
    }

/*─────────────────────────────────────────────────────────
    카드뉴스 존
─────────────────────────────────────────────────────────*/
    .cards{position:relative; padding:var(--row-gap80) 0; margin:0 var(--col-gap60) var(--row-gap80); background:var(--point-color11); border-radius:var(--radius-30);overflow:hidden;}
    .cards > .w_custom{z-index:3;}
    .cards::before,.cards::after{content:""; box-sizing:border-box; position:absolute; z-index:0; aspect-ratio:auto 1; border-radius:100%; pointer-events:none;}
    .cards::before{width:210px; left:-4%; top:40%; background:radial-gradient(75.56% 75.56% at 35.44% 69.62%, var(--point-color08) 0%, rgba(213, 235, 255, 0.20) 70%);}
    .cards::after{width:150px; right:-3%; bottom:58%; background:radial-gradient(75.56% 75.56% at 35.44% 69.62%, #a7d86a 0%, rgba(220, 240, 200, 0.20) 70%);}
    .cards-orb{box-sizing:border-box; position:absolute; z-index:0; width:64px; aspect-ratio:auto 1; border-radius:100%; pointer-events:none;left:8%; top:auto; bottom:-20px;background:radial-gradient(75.56% 75.56% at 35.44% 69.62%, #f6a94a 0%, rgba(255, 225, 190, 0.20) 70%);}
    .card-carousel{position:relative;}
    .card-prev,.card-next{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--gray-bg07); border-radius:50%; background:var(--point-white); color:var(--black-color01); box-shadow:0 6px 18px rgba(0,0,0,.12); transition:border-color .2s, opacity .2s, background .2s;}
    .card-prev{left:-24px;}
    .card-next{right:-24px;}
    .card-prev svg,.card-next svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
    .card-prev:disabled,.card-next:disabled{opacity:0; pointer-events:none;}
    .card-viewport{overflow:hidden; padding:clamp(14px, 1.11vw, 16px) var(--col-gap20) clamp(39px, 3.06vw, 44px); margin:calc(clamp(14px, 1.11vw, 16px) * -1) calc(var(--col-gap20) * -1) calc(clamp(39px, 3.06vw, 44px) * -1);}
    .card-grid{display:flex; gap:var(--col-gap24); transition:transform .5s cubic-bezier(.22,.9,.3,1); will-change:transform;}
    .card-item{flex:0 0 calc((100% - 48px)/3); background:var(--point-white); border:1px solid var(--gray-bg07); border-radius:clamp(6px, 0.83vw, 12px); overflow:hidden; transition:box-shadow .25s, transform .25s;}
    .card-item>a{display:block;}
    .card-thumb{aspect-ratio:16/10; overflow:hidden; background:var(--gray-bg01);}
    .card-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,.9,.3,1);}
    .card-body{padding:clamp(19px, 1.53vw, 22px) var(--col-gap24) clamp(23px, 1.81vw, 26px);}
    .card-body h3{display:flex; align-items:center; gap:4px; font-size:var(--text-21); font-weight:600; color:var(--black-color01); letter-spacing:-.4px; line-height:1.4;}
    .card-desc{margin-top:var(--row-gap10); font-size:var(--text-17); color:var(--black-color13); line-height:1.55; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
    .card-grid--static{flex-wrap:wrap;}

    /* 게시판 목록에서 쓰는 카드(갤러리 게시판 등) — 뱃지/메타/빈 썸네일 */
    .card-body .tag{display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 10px; border-radius:var(--radius-10); background:var(--point-color01); color:var(--point-white); font-size:var(--text-12); font-weight:700; white-space:nowrap; margin-bottom:8px;}
    .card-body .tag.prefix.is-free{background:var(--point-color03);}
    .card-body .tag.prefix.is-paid{background:var(--point-color06);}
    .card-meta{margin-top:8px; display:flex; align-items:center; gap:6px; font-size:var(--text-13); color:var(--black-color13);}
    .card-meta-sep{color:var(--black-color10);}
    .card-thumb-empty,.card-thumb-secret{width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--black-color09); font-size:var(--text-14);}
    .bl-gallery-empty{text-align:center; color:var(--black-color09); padding:var(--row-gap60) 0; font-size:var(--text-16);}

    /* over */
    @media (hover:hover) and (pointer:fine){
        .card-prev:hover,.card-next:hover{background:var(--point-color01); border-color:var(--point-color01); color:var(--point-white);}
        .card-item:hover{border-color:var(--black-color00); box-shadow:0 12px 28px rgba(0,0,0,.1);}
        .card-item:hover .card-thumb img{transform:scale(1.06);}
    }

    @media (max-width:1100px){
        .card-item{flex-basis:calc((100% - 24px)/2);}
    }
    @media (max-width:768px){
        .card-item{flex-basis:100%;}
        .cards{margin-inline:20px;}
        .cards::before{display:none;}
    }

/*─────────────────────────────────────────────────────────
    소식 및 일정
─────────────────────────────────────────────────────────*/
    .news{padding:0 0 var(--row-gap80);}
    .news-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:var(--col-gap24); align-items:stretch;}
    .board-top h3,.board-head h3{font-size:var(--text-34); font-weight:600; letter-spacing:-1.2px; line-height:1.15; color:var(--black-color01);display: flex;flex-wrap:wrap;gap:var(--row-gap10);align-items: center;}
    .board-top h3 span,.board-head h3 span{font-size:var(--text-24);}
    .board-head{margin-bottom:var(--row-gap20);}

    .news-board{display:flex; flex-direction:column; width:calc(100% - 10px);}
    .board-top{display:flex; justify-content:space-between; align-items:center; gap:clamp(14px, 1.11vw, 16px); flex-wrap:wrap; min-height:44px; margin-bottom:var(--row-gap20);}
    .board-panel{height:308px; overflow:hidden; background:var(--point-white); border:1px solid var(--gray-bg07); border-radius:clamp(6px, 0.83vw, 12px); padding:var(--row-gap30);}

    /* 탭형 게시판 (타이틀 오른쪽 끝 정렬) */
    .tabbar{display:inline-flex; gap:clamp(3px, 0.28vw, 4px); padding:clamp(5px, 0.42vw, 6px); background:var(--gray-bg01); border-radius:9999px;}
    .tabbar .tb{padding:clamp(8px, 0.63vw, 9px) var(--col-gap20); border-radius:9999px; border:0; background:transparent; font-size:var(--text-15); font-weight:600; color:var(--black-color13); transition:background .18s, color .18s, box-shadow .18s;}
    .tabbar .tb.is-on{background:var(--point-color01); color:var(--point-white); box-shadow:0 1px 2px rgba(0,0,0,.12);}

    /* 고객센터(community) — 탭 전환형 목록 페이지: 카드뉴스/공지사항/지역모임 */
    /* 탭 디자인 — 게시판 말머리 분류(.list_tabs)와 동일한 룩. JS 훅(.tabbar .tb)은 유지하고 룩만 덮어쓴다. */
    .cs-board .tabbar{display:flex; flex-wrap:wrap; gap:8px; padding:0; background:none; border-radius:0;}
    .cs-board .tabbar .tb{height:36px; padding:0 var(--col-gap17); border-radius:9999px; background:var(--gray-bg01); font-size:var(--text-14); font-weight:600; color:var(--black-color07); box-shadow:none;}
    .cs-board .tabbar .tb.is-on{background:var(--point-color01); color:var(--point-white);}
    @media (hover:hover) and (pointer:fine){
        .cs-board .tabbar .tb:not(.is-on):hover{background:var(--gray-bg05); color:var(--black-color01);}
    }

    /* 전체 보기 — 탭과 같은 줄(.sec-head.with-more) 우측에 배치, 활성 탭에 맞춰 링크가 바뀐다(스크립트) */
    .cs-board .sec-head.with-more{align-items:center;}
    .cs-board .card-grid{flex-wrap:wrap;}

    .cs-board #panel-notice .bl-cat{display:none;}

    .cs-panel{background:var(--point-white); border:1px solid var(--gray-bg07); border-radius:clamp(6px, 0.83vw, 12px); padding:var(--row-gap30);}
    /* 지역모임(meetup) 패널도 공지사항과 동일한 디자인(cs-panel)을 그대로 사용 */
    .cs-panel--meetup{background:var(--point-white); border:1px solid var(--gray-bg07); padding:var(--row-gap30);}

    /* over */
    @media (hover:hover) and (pointer:fine){
        .tabbar .tb:hover:not(.is-on){color:var(--black-color01);}
    }

    .board-list{display:flex; flex-direction:column;}
    .board-list[hidden]{display:none;}
    .board-list li a{display:flex; align-items:center; justify-content:space-between; gap:clamp(14px, 1.11vw, 16px); padding:clamp(19px, 1.53vw, 22px) 0; border-bottom:1px solid var(--gray-bg05); transition:color .18s, padding-left .18s;}
    .board-list li:first-child a{padding-top:0;}
    .board-list li:last-child a{padding-bottom:0;}
    .board-list li:last-child a{border-bottom:0;}
    .board-list .bl-cat{flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:52px; height:28px; padding:0 clamp(10px, 0.83vw, 12px); border-radius:9999px; font-size:var(--text-13); font-weight:700; letter-spacing:-.2px;}

    /* over */
    @media (hover:hover) and (pointer:fine){
        .board-list li a:hover{color:var(--point-color01); padding-left:clamp(7px, 0.56vw, 8px);}
    }
    .cat-notice{background:rgba(27,46,89,.1); color:var(--point-color01);}
    .cat-news{background:rgba(141,198,63,.2); color:var(--point-color04);}
    .cat-event{background:rgba(232,130,30,.14); color:var(--point-color05);}
    .board-list .bl-ti{flex:1; min-width:0; font-size:var(--text-16); font-weight:500; color:inherit; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    .board-list .bl-date{flex-shrink:0; font-size:var(--text-15); color:var(--black-color13);}

    /* meetup 일정 (메인 페이지 커뮤니티 위젯 — 원래 디자인 유지) */
    .meetup{display:flex; flex-direction:column;}
    .meetup .board-head{display:flex; align-items:center; min-height:44px; margin-bottom:var(--row-gap20);}
    .meetup-panel{height:308px; overflow:hidden; background:var(--point-color06); border-radius:clamp(6px, 0.83vw, 12px); padding:var(--row-gap20);}
    .meetup-list{display:flex; flex-direction:column; gap:clamp(10px, 0.83vw, 12px);}
    .meetup-list li a{display:flex; align-items:center; gap:clamp(12px, 0.97vw, 14px); padding:clamp(12px, 0.97vw, 14px) clamp(14px, 1.11vw, 16px); background:var(--point-white); border:1px solid transparent; border-radius:clamp(4px, 0.56vw, 8px); transition:border-color .2s;}
    .mt-date{flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:52px; height:28px; padding:0 clamp(10px, 0.83vw, 12px); border-radius:9999px; background:rgba(124,92,191,.16); color:var(--point-color06); font-size:var(--text-13); font-weight:700; letter-spacing:-.2px;}
    .mt-ti{flex:1; min-width:0; font-size:var(--text-15); font-weight:500; color:var(--black-color01);}

    /* 고객센터(/page/community) 위젯의 지역모임 탭만 공지사항과 동일한 리스트 디자인 사용 */
    .cs-board .meetup-list{display:flex; flex-direction:column; gap:0;}
    .cs-board .meetup-list[hidden]{display:none;}
    .cs-board .meetup-list li a{display:flex; align-items:center; justify-content:space-between; gap:clamp(14px, 1.11vw, 16px); padding:clamp(19px, 1.53vw, 22px) 0; background:none; border:0; border-bottom:1px solid var(--gray-bg05); border-radius:0; transition:color .18s, padding-left .18s;}
    .cs-board .meetup-list li:first-child a{padding-top:0;}
    .cs-board .meetup-list li:last-child a{padding-bottom:0; border-bottom:0;}
    .cs-board .mt-date{flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:52px; height:28px; padding:0 clamp(10px, 0.83vw, 12px); border-radius:9999px; font-size:var(--text-13); font-weight:700; letter-spacing:-.2px; background:rgba(27,46,89,.1); color:var(--point-color01);}
    .cs-board .mt-ti{flex:1; min-width:0; font-size:var(--text-16); font-weight:500; color:inherit; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

    /* over */
    @media (hover:hover) and (pointer:fine){
        .cs-board .meetup-list li a:hover{color:var(--point-color01); padding-left:clamp(7px, 0.56vw, 8px);}
    }

    @media (max-width:1100px){
        .news-grid{grid-template-columns:1fr;}
        .news-board{width:100%;}
    }

/*─────────────────────────────────────────────────────────
    카카오톡 채널 배너 (튜터 다이렉트 연결)
─────────────────────────────────────────────────────────*/
    .kakao{padding:0 0 var(--row-gap80);}
    .kakao-band{position:relative; display:flex; justify-content:space-between; align-items:center; gap:clamp(28px, 2.22vw, 32px); flex-wrap:wrap; background:var(--point-color01); border-radius:var(--radius-16); padding:clamp(50px, 3.89vw, 56px); overflow:hidden;}
    .kakao-media{position:absolute; inset:0;}
    .kakao-media img{width:100%; height:100%; object-fit:cover; object-position:center 55%;}
    .kakao-media::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.58) 60%,rgba(0,0,0,.46) 100%);}
    .kakao-text,.kakao-links{position:relative; z-index:2;}
    .kakao-text .kicker{display:block; font-size:var(--text-14); font-weight:600; color:rgba(255,255,255,.72); margin-bottom:clamp(10px, 0.83vw, 12px);}
    .kakao-text h2{font-family:'Inter','Pretendard',sans-serif; font-size:var(--text-38); font-weight:600; letter-spacing:-1px; color:var(--point-white); margin-bottom:var(--row-gap10);}
    .kakao-text p{font-size:var(--text-17); font-weight:300; color:rgba(255,255,255,.85);}
    .kakao-links{display:flex; gap:clamp(10px, 0.83vw, 12px); flex-wrap:wrap;}
    .kakao-btn{display:inline-flex; align-items:center; gap:var(--row-gap10); height:52px; padding:0 clamp(23px, 1.81vw, 26px); border-radius:9999px; font-size:var(--text-16); font-weight:600; letter-spacing:-.2px; transition:transform .2s, box-shadow .2s, filter .2s;}
    .kakao-btn .kk-ic,.kakao-btn .wa-ic{display:grid; place-items:center; width:22px; height:22px;}
    .kakao-btn .kk-ic svg,.kakao-btn .wa-ic svg{width:20px; height:20px; fill:currentColor;}
    .kakao-btn--kko{background:#FAE100; color:#191600;}
    .kakao-btn--wa{background:#25D366; color:var(--point-white);}
    .kakao-btn .kk-ext{font-size:var(--text-15); opacity:.7;}

    /* over */
    @media (hover:hover) and (pointer:fine){
        .kakao-btn:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.14);}
    }

    @media (max-width:1100px){
        .kakao-band{padding:clamp(28px, 2.22vw, 32px) var(--col-gap24);}
        .kakao-text h2{font-size:var(--text-26);}
        .kakao-links{width:100%;}
        .kakao-btn{flex:1; min-width:0; justify-content:center; white-space:nowrap; font-size:var(--text-14); padding:0 clamp(12px, 0.97vw, 14px); gap:clamp(7px, 0.56vw, 8px);}
    }

/*─────────────────────────────────────────────────────────
    Footer (다크 · 페이지 마감)
─────────────────────────────────────────────────────────*/
    .footer{background:var(--black-color02); color:rgba(255,255,255,.72); padding:clamp(57px, 4.44vw, 64px) 0 0;}
    .footer-top{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--row-gap40); flex-wrap:wrap; padding-bottom:clamp(32px, 2.5vw, 36px); border-bottom:1px solid rgba(255,255,255,.14);}
    .footer-top .footer-brand img{filter:var(--filter-white);}
    .f-links ul{display:flex; flex-wrap:wrap; gap:var(--row-gap10) clamp(25px, 1.94vw, 28px);}
    .f-links li a{font-size:var(--text-15); color:rgba(255,255,255,.72); transition:color .18s;}
    .f-links li.policy a{color:var(--point-white); font-weight:600;}
    .footer-info{display:flex; flex-direction:column; gap:clamp(7px, 0.56vw, 8px); padding:clamp(25px, 1.94vw, 28px) 0;}
    .footer-info .f-info-line{display:flex; flex-wrap:wrap; gap:clamp(5px, 0.42vw, 6px) clamp(25px, 1.94vw, 28px);}
    .footer-info p{font-size:var(--text-15); color:rgba(255,255,255,.6); line-height:1.6;}
    .footer-info b{color:rgba(255,255,255,.9); font-weight:400; margin-right:clamp(5px, 0.42vw, 6px);}
    .footer-bot{padding:var(--col-gap24) 0;}
    .f-copy{display:flex; justify-content:space-between; align-items:center; gap:clamp(10px, 0.83vw, 12px); flex-wrap:wrap; font-size:var(--text-13); color:rgba(255,255,255,.5); letter-spacing:.2px;}
    .designed-by{color:rgba(255,255,255,.4);}

    /* over */
    @media (hover:hover) and (pointer:fine){
        .f-links li a:hover{color:var(--point-white);}
    }

    @media (max-width:1100px){
        .footer-top{flex-direction:column; gap:var(--col-gap24);}
    }

/*─────────────────────────────────────────────────────────
    Side FAB
─────────────────────────────────────────────────────────*/
    .side-fab{position:fixed; right:24px; bottom:28px; z-index:90; display:flex; flex-direction:column;}
    .side-fab a,.side-fab button{display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--point-white); border:1px solid var(--gray-bg07); color:var(--black-color01); box-shadow:0 8px 24px rgba(0,0,0,.1); transition:transform .2s, background .2s, color .2s;}
    .side-fab svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8;}
    .side-fab .contact{background:#FAE100; border-color:transparent; color:#191600;}
    .side-fab .contact svg{fill:currentColor; stroke:none;}
    .side-fab .whatsapp{margin-top:clamp(10px, 0.83vw, 12px); background:#25D366; border-color:transparent; color:var(--point-white);}
    .side-fab .whatsapp svg{fill:currentColor; stroke:none;}
    .side-fab .facebook{margin-top:clamp(10px, 0.83vw, 12px); background:#1877F2; border-color:transparent; color:var(--point-white);}
    .side-fab .facebook svg{width:28px; height:28px; fill:currentColor; stroke:none;}
    .side-fab .top{height:0; margin-top:0; opacity:0; visibility:hidden; overflow:hidden; transform:translateY(20px); transition:height .35s cubic-bezier(.22,.9,.3,1), margin-top .35s, opacity .3s, transform .35s, visibility .35s;}
    .side-fab .top.show{height:56px; margin-top:clamp(10px, 0.83vw, 12px); opacity:1; visibility:visible; transform:translateY(0);}

    /* over */
    @media (hover:hover) and (pointer:fine){
        .side-fab .contact:hover{transform:translateY(-2px); filter:brightness(1.03);}
        .side-fab .whatsapp:hover{transform:translateY(-2px); filter:brightness(1.03);}
        .side-fab .facebook:hover{transform:translateY(-2px); filter:brightness(1.08);}
        .side-fab .top:hover{background:var(--point-color01); color:var(--point-white); border-color:var(--point-color01);}
    }

    @media (max-width:1100px){
        .side-fab{right:14px; bottom:16px;}
        .side-fab a,.side-fab button{width:52px; height:52px;}
        .side-fab .top.show{height:52px;}
    }

    /* 모바일 — 버튼 4개가 화면을 가리지 않도록 크기·간격 축소 */
    @media (max-width:768px){
        .side-fab{right:12px; bottom:14px;}
        .side-fab a,.side-fab button{width:46px; height:46px; box-shadow:0 6px 16px rgba(0,0,0,.12);}
        .side-fab svg{width:21px; height:21px;}
        .side-fab .facebook svg{width:24px; height:24px;}
        .side-fab .whatsapp,.side-fab .facebook{margin-top:8px;}
        .side-fab .top.show{height:46px; margin-top:8px;}
    }

/*───────────────────────────────────────────────────────────

	서브공통

───────────────────────────────────────────────────────────*/
    /*visual*/
    .sub_visual{position:relative;padding-block:var(--row-gap80) var(--row-gap20);color:var(--black-color02);text-align:left;}
    .sub_visual > .w_custom{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:clamp(15px, 3vw, 30px);}
    .sub_visual .sv_title{display:flex;flex-direction:column;align-items:flex-start;gap:9px;font-size:var(--text-20);font-weight:600;color:var(--black-color02);text-align:left;}
    .sub_visual .sv_title h2{font-size:var(--text-54);}
    .sub_visual .sv_title span{color:var(--point-color01);}
    /*하단에 lnb(.sub-nav)가 없을 때는 서브 비주얼이 구분선을 담당*/
    .sub_visual:not(:has(~ .sub-nav)){box-shadow:inset 0 -1px 0 var(--border-color01);}

    /*현재 위치*/
    .sub_visual .sv_nav{flex-shrink:0;}
    .sub_visual .navDesc{display:flex;align-items:center;flex-wrap:wrap;}
    .sub_visual .navDesc li{display:flex;align-items:center;font-size:var(--text-16);font-weight:400;line-height:1.44;color:rgba(34, 34, 34, 0.7);}
    .sub_visual .navDesc li::after{display:inline-flex;content:"";width:3px;aspect-ratio:auto 1;border-radius:100%;background:rgba(34, 34, 34, 0.5);margin-inline:clamp(10px, 1.6vw, 16px);}
    .sub_visual .navDesc li:last-child{color:var(--black-color02);font-weight:500;}
    .sub_visual .navDesc li:last-child::after{display:none;}
    .sub_visual .navDesc .home a{display:block;width:clamp(16px, 2.6vw, 21px);}
    .sub_visual .navDesc .home a img{width:100%;}

    body:has(.sub_visual) #header{background:var(--point-white);position:sticky;}
    body:has(.sub_visual) #header :is(.logo, .gnb > li > a, .allCate){filter:none;}

    .sub-nav{position:relative;width:100%;box-shadow:inset 0 -1px 0 var(--border-color01);}
    .sub-nav .lnb{display:flex;align-items:stretch;overflow-x:auto;gap:var(--row-gap20);}
    .sub-nav .lnb a{display:flex;align-items:center;justify-content:center;padding:clamp(16px, 1.5vw, 28px) clamp(8px, 0.8vw, 14px);font-size:var(--text-19);font-weight:500;line-height:1.3;color:var(--black-color03);text-align:center;transition:color 0.3s, box-shadow 0.3s;}
    .sub-nav .lnb a.on{color:var(--point-color01);font-weight:600;box-shadow:inset 0 -2px 0 var(--point-color01);}
        @media (hover:hover) and (pointer:fine) {
            .sub-nav .lnb a:not(.on):hover{color:var(--point-color01);}
        }

    @media (max-width:860px) {
        .sub_visual > .w_custom{align-items:flex-start;flex-direction:column;}
        .sub-nav .lnb a{flex:0 0 auto;white-space:nowrap;}
    }

/*─────────────────────────────────────────────────────────
    게시판 목록 (건수 · 검색 · 표 형태 목록) — 게시판 공용 컴포넌트
─────────────────────────────────────────────────────────*/
    /* === paging === */
		#wrap .paging {display: flex; justify-content: center; align-items: center; width: max-content; text-align:center;width:100%;margin-top:var(--row-gap60)}
		#wrap .paging span {display:inline-block;vertical-align:top;}
		#wrap .paging a {box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-17);font-weight: 500;color:var(--black-color08);padding:0;border:0;box-sizing:border-box;width:clamp(30px, 4vw, 40px);height:clamp(30px, 4vw, 40px);line-height:1;min-width:auto;text-align:center;vertical-align:top;margin:0 5px;}
		#wrap .paging :is(.on a, a.on){background:var(--black-color01);color:var(--point-white);font-weight:600;}
		#wrap .paging .arrow a {font-size:0;width:clamp(20px, 3vw, 30px); background:no-repeat center; }
		#wrap .paging .arrow.first a {background-image:url("/images/paging_first.svg");}
		#wrap .paging .arrow.prev a {background-image:url("/images/paging_prev.svg"); margin-right: 10px;}
		#wrap .paging .arrow.next a {background-image:url("/images/paging_prev.svg"); margin-left: 10px;scale:-1 -1;}
		#wrap .paging .arrow.last a {background-image:url("/images/paging_first.svg");scale:-1 -1;}

		@media (max-width:860px) {
			#wrap .paging {position: relative; left: inherit; top: inherit; translate: 0; width: 100%;}
			#wrap .paging + .btn_wrap {margin-top: var(--row-gap40);}
		}  

    .sub_board{padding-block:var(--row-gap60);}

    /* 건수(좌) + 검색(우) */
        .list_bar{display:flex;align-items:center;justify-content:space-between;gap:var(--row-gap20);flex-wrap:wrap;margin-bottom:var(--row-gap25);}
        .list_count{font-size:var(--text-17);color:var(--black-color05);}
        .list_count strong{color:var(--point-color01);font-weight:700;}

    /* 검색폼 (.search_wrap) */
        .search_wrap .inp_box{display:flex;flex-wrap:nowrap;align-items:center;min-height:48px;box-sizing:border-box;border-radius:var(--radius-10);background:var(--point-white);border:2px solid var(--point-color01);overflow:hidden;padding-left:var(--row-gap15);}
        .search_wrap .inp_box input[type="text"]{flex:1;min-width:160px;border:0;background:none;height:100%;padding:0;font-size:var(--text-16);color:var(--black-color01);outline:none;}
        .search_wrap .inp_box input[type="text"]::placeholder{color:var(--black-color09);}
        .search_wrap .btn_search{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--row-gap50);align-self:stretch;border:0;background:var(--point-color01);color:var(--point-white);cursor:pointer;transition:background-color .2s;}
        .search_wrap .btn_search svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

    /* 마이페이지 검색(.mp-search-wrap) — .search_wrap 옆에 초기화 링크 */
        .mp-search-wrap{display:flex;align-items:center;gap:var(--row-gap10);}
        .mp-search-clear{flex-shrink:0;font-size:var(--text-14);color:var(--black-color08);white-space:nowrap;}

    /* over */
    @media (hover:hover) and (pointer:fine){
        .search_wrap .btn_search:hover{background-color:var(--point-color02);}
        .mp-search-clear:hover{color:var(--point-color01);text-decoration:underline;}
    }

    /* 검색폼 (.srch — 일반 게시판 목록, 결과내 재검색 지원) */
        .srch{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--row-gap10);}
        .srch-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
        .srch-label{font-size:var(--text-14);color:var(--black-color07);}
        .srch-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:9999px;background:var(--gray-bg01);font-size:var(--text-14);color:var(--black-color04);}
        .srch-chip-remove{color:var(--black-color09);line-height:1;transition:color .15s;}
        .srch-clear{font-size:var(--text-13);color:var(--black-color09);text-decoration:underline;}
        .srch-within{display:flex;align-items:center;gap:6px;font-size:var(--text-14);color:var(--black-color07);cursor:pointer;margin-left:2px;}
        .srch-within input{width:15px;height:15px;accent-color:var(--point-color01);}
        .srch-field{display:flex;flex-wrap:nowrap;align-items:center;height:48px;}
        #wrap .srch-input{width:220px;height:100%;border:1px solid var(--border-color02);border-right:0;border-radius:var(--radius-10) 0 0 var(--radius-10);background:var(--point-white);padding:0 var(--row-gap15);font-size:var(--text-15);color:var(--black-color01);outline:none;transition:border-color .15s;}
        .srch-input::placeholder{color:var(--black-color09);}
        .srch-input:focus{border-color:var(--point-color01);}
        .srch-btn{height:100%;padding-inline:var(--col-gap22);border-radius:0 var(--radius-10) var(--radius-10) 0;background:var(--point-color01);color:var(--point-white);font-size:var(--text-15);font-weight:700;transition:background .2s;}

        /* over */
        @media (hover:hover) and (pointer:fine){
            .srch-chip-remove:hover{color:#e11d48;}
            .srch-clear:hover{color:var(--black-color05);}
            .srch-btn:hover{background:var(--point-color02);}
        }

    /* 분류 탭 (.list_tabs — 말머리 필터) */
        .list_tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--row-gap20);}
        .list_tab{display:inline-flex;align-items:center;height:36px;padding:0 var(--col-gap17);border-radius:9999px;background:var(--gray-bg01);font-size:var(--text-14);font-weight:600;color:var(--black-color07);transition:background .15s, color .15s;}
        .list_tab.is-on{background:var(--point-color01);color:var(--point-white);}

        /* over */
        @media (hover:hover) and (pointer:fine){
            .list_tab:not(.is-on):hover{background:var(--gray-bg05);color:var(--black-color01);}
        }

    /* 좌측 사이드바(주제별 분류) + 우측 표 */
        .vocab-layout{display:flex;align-items:flex-start;gap:var(--row-gap30);}
        .vocab-side{width:240px;flex-shrink:0;background:var(--gray-bg01);border-radius:var(--radius-15);padding:var(--row-gap25) var(--row-gap20);}
        .vocab-side-title{font-size:var(--text-16);font-weight:700;color:var(--black-color01);letter-spacing:-.2px;margin-bottom:var(--row-gap15);padding-bottom:var(--row-gap15);border-bottom:1px solid var(--border-color01);}
        .vocab-side ul{display:flex;flex-direction:column;gap:4px;}
        .vocab-side a{display:flex;align-items:center;justify-content:space-between;gap:var(--row-gap10);padding:var(--row-gap10) var(--col-gap17);border-radius:var(--radius-10);font-size:var(--text-15);color:var(--black-color07);transition:background .15s, color .15s;}
        .vocab-side-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
        .vocab-side-count{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 6px;border-radius:9999px;background:var(--point-white);color:var(--black-color08);font-size:var(--text-13);font-weight:600;}
        .vocab-side a.is-on{background:var(--point-color01);color:var(--point-white);font-weight:700;}
        .vocab-side a.is-on .vocab-side-count{background:rgba(255,255,255,.22);color:var(--point-white);}

        /* over */
        @media (hover:hover) and (pointer:fine){
            .vocab-side a:not(.is-on):hover{background:var(--gray-bg05);color:var(--black-color01);}
        }

    /* 목록 표 (.bbs_table) */
        .bbs_table{position:relative;width:100%;table-layout:fixed;border-top:1px solid var(--black-color01);}
        .bbs_table :where(th, td){line-height:1.3;border-bottom:1px solid var(--border-color01);padding:var(--row-gap20) 10px;text-align:center;}
        .bbs_table th{font-size:var(--text-16);font-weight:600;color:var(--black-color01);}
        .bbs_table td{font-size:var(--text-15);font-weight:400;color:var(--black-color08);}
        .bbs_table td.left{font-size:var(--text-16);text-align:left;padding-inline:var(--row-gap20);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;color:var(--black-color03);}
        .bbs_table td.left .title{display: flex;align-items: center;gap:var(--row-gap10)}
        .bbs_table td.left a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
        .bbs_table td.left svg{flex-shrink:0;}
        .bbs_table td.nodata{color:var(--black-color09);padding:var(--row-gap60) 10px;}
        .bbs_table .for_t{display:none;}

        /* over */
        @media (hover:hover) and (pointer:fine){
            .bbs_table tbody tr:not(:has(.nodata)):hover{background:var(--gray-bg01);}
        }

    /* 단어 뜻(싱할라/영어) */
        .bbs_table .si{color:var(--black-color03);}
        .bbs_table .en{color:var(--black-color07);}
        .bbs_table .tier-locked{display:inline-flex;align-items:center;gap:4px;color:var(--point-color06);}

    /* 공지 배지 + 공지행 강조 */
        .bbs_table .tag{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 12px;border-radius:var(--radius-10);background:var(--point-color01);color:var(--point-white);font-size:var(--text-13);font-weight:700;white-space:nowrap;}
        .bbs_table .tag.prefix.is-free{background:var(--point-color03);}
        .bbs_table .tag.prefix.is-paid{background:var(--point-color06);}
        /* 공지사항 게시판 말머리 — 메인페이지 소식 위젯(.bl-cat)과 동일한 톤 */
        .bbs_table .tag.prefix.cat-notice{background:rgba(27,46,89,.1); color:var(--point-color01);}
        .bbs_table .tag.prefix.cat-event{background:rgba(232,130,30,.14); color:var(--point-color05);}
        .bbs_table tr.notice{background:var(--gray-bg01);}
        .bbs_table td.left .tag{margin-right:8px;}

    /* 목록 제목 앞 추가필드 배지 (예: meetup 게시판의 일정 날짜) */
        .bbs_table .list-field{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 12px;margin-right:8px;border-radius:var(--radius-10);background:var(--gray-bg05);color:var(--black-color06);font-size:var(--text-13);font-weight:600;white-space:nowrap;}

    /* Q&A 상품 썸네일 */
        .bbs_table .pf-thumb{display:inline-block;width:56px;height:56px;border-radius:var(--radius-10);overflow:hidden;border:1px solid var(--border-color01);}
        .bbs_table .pf-thumb img{width:100%;height:100%;object-fit:cover;}

    /* 구분(무료/유료) 배지 */
        .tier-badge{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--col-gap17);height:32px;border-radius:9999px;font-size:var(--text-13);font-weight:600;background:rgba(141,198,63,.14);color:var(--point-color04);white-space:nowrap;}
        .tier-badge.is-paid{background:rgba(124,92,191,.14);color:var(--point-color06);}

    /* 학습완료 토글 버튼 */
        .learn-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 var(--col-gap17);height:32px;border-radius:9999px;border:1px solid var(--point-color01);background:var(--point-white);color:var(--point-color01);font-size:var(--text-13);font-weight:600;cursor:pointer;transition:background .15s, border-color .15s, color .15s;}
        .learn-btn:not(.is-done)::after{content:"→";font-size:var(--text-13);line-height:1;}
        .learn-btn.is-done{background:var(--point-color03);border-color:var(--point-color03);color:var(--point-color01);}

    /* 글쓰기 버튼 */
        #wrap .view_btn {position: relative; margin-top: var(--row-gap60);text-align: center;display: flex;flex-wrap:wrap;justify-content: center;align-items: center;margin-top:var(--row-gap40);gap:var(--row-gap10);}
        #wrap .view_btn.right {justify-content: flex-end;}
        #wrap .view_btn.policy_wrap{flex-direction: column;}
        .view_btn .main_more{display:inline-flex;align-items:center;justify-content:center;height:var(--row-gap50);padding-inline:var(--col-gap30);border-radius:9999px;background:var(--point-color01);color:var(--point-white);font-size:var(--text-16);font-weight:600;transition:background .2s;border:1px solid var(--point-color01);}
        .view_btn .main_more.basic{background:var(--point-white);color:var(--point-color01)}

        #wrap .view_btn .policy{display: flex;flex-wrap:wrap;align-items: center;gap:var(--row-gap10);justify-content: center;}
        #wrap .view_btn .policy button{text-decoration: underline;}

        /* over */
        @media (hover:hover) and (pointer:fine){
            .view_btn .main_more:hover{background:var(--point-color02);}
            .view_btn .main_more.basic:hover{background:var(--point-color01);color:var(--point-white)}
        }

        @media (max-width:1023px) {
            .vocab-layout{flex-direction:column;}
            .vocab-side{width:100%;background:transparent;border-radius:0;padding:0;}
            .vocab-side-title{display:none;}
            .vocab-side ul{display:flex;flex-wrap:wrap;gap:8px;flex-direction:row;justify-content: center;}
            .vocab-side a{border:1px solid var(--border-color01);border-radius:9999px;padding:8px 14px;}
            .vocab-side a.is-on{border-color:var(--point-color01);}
            .vocab-side-count{background:var(--gray-bg05);}
            .vocab-side a.is-on .vocab-side-count{background:rgba(255,255,255,.22);}
        }
        @media (max-width:768px) {
            .bbs_table{display:block;}
            .bbs_table thead{display:none;}
            .bbs_table :where(tbody, tr, th, td){display:block;width:100%;border:0;padding:0;text-align:left;}
            .bbs_table tr{padding:var(--row-gap30) var(--row-gap20);display:flex;flex-wrap:wrap;gap:var(--row-gap10) var(--row-gap20);border-bottom:1px solid var(--border-color01);align-items: center;}
            .bbs_table td{width:auto;}
            .bbs_table td.left{width:100%;padding:0;}
            .bbs_table td.num{display:none;}
            .bbs_table .for_t{display:inline-block;}

            .tier-badge, .learn-btn{border-radius:var(--radius-20);}

            .srch{justify-content:flex-start;width:100%;}
            .srch-field{flex:1;width:100%;}
            .srch-input{width:auto;flex:1;}
        }

    /* === view === */
		#wrap .bbs_view .view_tit{display: flex;flex-direction: column;gap:var(--row-gap30);box-sizing:border-box;padding-bottom:var(--row-gap40);border-bottom:1px solid var(--border-color01);align-items: flex-start;}
		#wrap .bbs_view .view_tit h4{display: flex;align-items:center;gap:var(--row-gap20);}
		#wrap .bbs_view .view_tit h4 .tag{display: inline-flex;align-items: center;justify-content: center;box-sizing:border-box;font-size:var(--text-16);color:var(--point-white);font-weight:600;background:var(--point-color01);padding:clamp(3px, 0.5vw, 5px) clamp(10px, 2vw, 20px);border-radius:30px;flex-shrink:0;}
		#wrap .bbs_view .view_tit h4 .tag.prefix.is-free{background:var(--point-color03);}
		#wrap .bbs_view .view_tit h4 .tag.prefix.is-paid{background:var(--point-color06);}
		/* 공지사항 게시판 말머리 — 목록(.bbs_table .tag.prefix)과 동일한 톤 */
		#wrap .bbs_view .view_tit h4 .tag.prefix.cat-notice{background:rgba(27,46,89,.1); color:var(--point-color01);}
		#wrap .bbs_view .view_tit h4 .tag.prefix.cat-event{background:rgba(232,130,30,.14); color:var(--point-color05);}
		#wrap .bbs_view .view_tit h4 strong{color:var(--black-color03);font-weight:600;line-height:1.4;font-size:var(--text-34);}
		#wrap .bbs_view .view_tit .name_box{display: flex;align-items: center;gap:var(--row-gap40);}
		#wrap .bbs_view .view_tit .name_box dl{display: flex;align-items: center;gap:clamp(10px, 1.2vw, 16px);position: relative;}
		#wrap .bbs_view .view_tit .name_box dl + dl:before{width:1px;height:clamp(8px, 1vw, 12px);content:"";background:var(--border-color01);display: inline-block;position: absolute;left:-20px;top:50%;translate:0 -50%;}
		#wrap .bbs_view .view_tit .name_box :where(dt, dd) {font-size:var(--text-18);font-weight:500;font-family:var(--font-type03);}
		#wrap .bbs_view .view_tit .name_box dt{color:var(--black-color06);}
		#wrap .bbs_view .view_tit .name_box dd{color:var(--black-color08);}
		#wrap .bbs_view div.view_cont{border-bottom:1px solid var(--border-color01);padding:clamp(25px, 4vw, 40px) 0;text-align: center;}
		#wrap .bbs_view .extra_editor_wrap{display: flex;box-sizing:border-box;border-radius:var(--radius-10);background:var(--gray-bg01);align-items: center;padding:clamp(12px, 2.2vw, 27px) 0;border:none;margin-top:40px;}
		#wrap .bbs_view .extra_editor_wrap h5 {text-align: center;font-size:var(--text-18);color:var(--black-color03);font-weight:500;width:clamp(100px, 15vw, 180px);flex-shrink:0;background:none;}
		#wrap .bbs_view .extra_editor_wrap > div.extra_cont{box-sizing:border-box;padding-inline:var(--row-gap60) clamp(12px, 3vw, 30px);position: relative;}
		#wrap .bbs_view .extra_editor_wrap > div.extra_cont:before{width:1px;height:clamp(8px, 1vw, 12px);content:"";background:var(--border-color01);display: inline-block;position: absolute;left:0;top:50%;translate:0 -50%;}
		#wrap .bbs_view .extra_editor_wrap > div.extra_cont a{font-size:var(--text-18);color:var(--black-color06) !important;font-weight:400;}
		#wrap .bbs_view .extra_editor_wrap > div.extra_cont .paid-download-btn{appearance:none;border:none;background:none;padding:0;margin:0;font:inherit;font-size:var(--text-18);color:var(--black-color06);font-weight:400;cursor:pointer;}
		#wrap .bbs_view .extra_editor_wrap > div.extra_cont .paid-download-btn:hover{color:var(--point-color06);}

    /* === 추가 필드 (cfd-*, readonly 노출 — front.css 의 bf-* 와 이름 충돌 방지) === */
		#wrap .bbs_view .cfd-field{display:flex;align-items:center;box-sizing:border-box;border-radius:var(--radius-10);background:var(--gray-bg01);padding:clamp(12px, 2.2vw, 27px) 0;margin-top:var(--row-gap10);flex-direction: row;}
		#wrap .bbs_view .cfd-field .cfd-label{width:clamp(100px, 15vw, 180px);flex-shrink:0;text-align:center;justify-content: center;}
		#wrap .bbs_view .cfd-field .cfd-label span{font-size:var(--text-18);color:var(--black-color03);font-weight:500;}
		#wrap .bbs_view .cfd-field .cfd-input{flex:1;min-width:0;box-sizing:border-box;padding-inline:var(--row-gap60) clamp(12px, 3vw, 30px);position:relative;font-size:var(--text-16);color:var(--black-color06);}
		#wrap .bbs_view .cfd-field .cfd-input:before{width:1px;height:clamp(8px, 1vw, 12px);content:"";background:var(--border-color01);display:inline-block;position:absolute;left:0;top:50%;translate:0 -50%;}
		#wrap .bbs_view .cfd-field .cfd-input input[type="text"],
		#wrap .bbs_view .cfd-field .cfd-input select{width:100%;border:none;background:none;padding:0;margin:0;font:inherit;color:inherit;appearance:none;pointer-events:none;height:auto;}
		#wrap .bbs_view .cfd-field .cfd-options{display:flex;flex-wrap:wrap;gap:var(--row-gap10);}
		#wrap .bbs_view .cfd-field .cfd-options label{display:none;}
		#wrap .bbs_view .cfd-field .cfd-options label:has(input:checked){display:inline-flex;align-items:center;height:32px;padding:0 var(--col-gap17);border-radius:9999px;background:var(--point-color01);color:var(--point-white);font-size:var(--text-14);font-weight:600;}
		#wrap .bbs_view .cfd-field .cfd-options label:has(input:checked) input{display:none;}
		#wrap .bbs_view .cfd-field .cfd-content{min-height:80px;line-height:1.7;color:var(--black-color06);}
		#wrap .bbs_view .cfd-field .cfd-download{color:var(--point-color01);text-decoration:underline;font-size:var(--text-16);}
		#wrap .bbs_view .cfd-field .cfd-download:hover{color:var(--point-color02);}
		@media (max-width:640px){
			#wrap .bbs_view .cfd-field{flex-direction:column;align-items:flex-start;gap:var(--row-gap10);padding:clamp(16px, 3vw, 20px);}
			#wrap .bbs_view .cfd-field .cfd-label{width:auto;text-align:left;}
			#wrap .bbs_view .cfd-field .cfd-input{padding-inline:0;}
			#wrap .bbs_view .cfd-field .cfd-input:before{display:none;}
		}

        .comment_write{display: flex;flex-direction: column;gap:var(--row-gap20);}
        .comment_write .bv-comment-row{display: flex;flex-wrap:wrap;gap:var(--row-gap20);}
        .bv-comment-agree{margin-top:var(--row-gap10);}

    /* === comment list (등록된 댓글 노출) === */
        .comment_sec{margin-top:var(--row-gap60);}
        .comment_tit{font-size:var(--text-20);font-weight:700;color:var(--black-color03);margin-bottom:var(--row-gap20);}
        .comment_item{box-sizing:border-box;border:1px solid var(--border-color01);border-radius:var(--radius-10);padding:var(--row-gap20);margin-bottom:var(--row-gap10);background:var(--point-white);}
        .comment_item.is-reply{margin-left:var(--col-gap40);border-left:2px solid var(--point-color01);}
        .comment_head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--col-gap20);flex-wrap:wrap;}
        .comment_who{display:flex;align-items:center;gap:var(--col-gap17);flex-wrap:wrap;}
        .comment_who .reply_ico{color:var(--black-color06);flex-shrink:0;}
        .comment_name{font-size:var(--text-15);font-weight:600;color:var(--black-color03);}
        .comment_date{font-size:var(--text-13);color:var(--black-color08);}
        .comment_actions{display:flex;align-items:center;gap:var(--col-gap17);flex-shrink:0;}
        .comment_btn{appearance:none;border:none;background:none;padding:0;margin:0;font:inherit;font-size:var(--text-13);color:var(--black-color06);cursor:pointer;}
        .comment_btn:hover{color:var(--point-color01);text-decoration:underline;}
        .comment_txt{font-size:var(--text-15);color:var(--black-color05);margin-top:var(--row-gap10);line-height:1.6;}
        .comment_txt.is-reply{padding-left:var(--col-gap20);}
        .bv-comment-reply-wrap{margin-top:var(--row-gap10);}
        .bv-comment-reply-wrap.hidden{display:none;}
        @media (max-width:640px) {
            .comment_item.is-reply{margin-left:var(--col-gap20);}
        }

        @media (max-width:640px) {
            #wrap .bbs_view .view_tit h4{flex-direction: column;align-items: flex-start;}
        }

    /* write-form */
        .write-form{position: relative;display: flex;flex-wrap: wrap;gap:var(--col-gap20);margin-top:var(--row-gap60);}
        .write-form .desc{width: calc(100% / 2 - var(--col-gap20) / 2);display: flex;flex-direction: column;gap: var(--row-gap10);}
        .write-form .desc:has(textarea, .db-captcha-img){width:100%;}
        .write-form .desc dt{font-size: var(--text-20);font-weight: 500;color: var(--black-color03);}
        .write-form .desc .req:after{content:"*";font-size:inherit;color:var(--point-color01);font-weight:400;display: inline-block;}
        .write-form .desc dd{appearance: none;}
        .write-form :where([type="text"], [type="password"], [type="email"], [type="tel"]){width:100%;}
        #wrap .captcha_box{padding:clamp(8px, 1vw, 12px);border:1px solid var(--border-color01);border-radius:5px;display: flex;align-items: center;gap:var(--row-gap10) var(--row-gap20);}
        #wrap .captcha_wrap {display: flex; gap: 10px;box-sizing: border-box;flex-shrink:0;}
        #wrap .captcha_box input[type="text"] {width:100%;border:none;padding:0;}
        #wrap .db-captcha-img {width:100px;}
        #wrap .db-captcha-refresh {display: flex; justify-content: center; align-items: center; width:clamp(30px, 4vw, 40px);aspect-ratio:auto 1;background: var(--gray-bg04);border-radius:5px;}

        :is([type="text"], [type="password"], [type="email"], [type="tel"]){height: clamp(40px, 5vw, 50px);border:1px solid var(--border-color01);font-size: var(--text-17);font-weight: 400;color: var(--black-color01);border-radius:var(--radius-10);overflow: hidden;text-overflow:ellipsis;white-space:nowrap;padding:clamp(10px, 1.6vw, 16px);}
        :is([type="text"], [type="password"], [type="email"], [type="tel"])::placeholder{color:var(--black-color10);}

        #wrap textarea{width: 100%;border: 1px solid var(--border-color01);height:clamp(120px, 16vw, 160px);font-size: var(--text-17);font-weight: 400;color: var(--black-color01);padding:clamp(10px, 1.6vw, 16px);line-height: 1.6;border-radius:var(--radius-10);resize:none;}
        #wrap textarea::placeholder{color:var(--black-color10);}

        label{cursor: pointer;}

        label:has([type="checkbox"]){display: flex;width: fit-content;align-items: flex-start;gap:var(--row-gap10);font-size: var(--text-19);font-weight: 500;color: var(--black-color03);line-height:clamp(20px, 2.4vw, 24px);}
        label:has([type="checkbox"]) strong{color:var(--point-color01);font-weight:600;}
        [type="checkbox"]{appearance: none;cursor: pointer;width:clamp(20px, 2.4vw, 24px);height: clamp(20px, 2.4vw, 24px);flex-shrink: 0;border: 1px solid var(--border-color01);display: flex;align-items: center;justify-content: center;border-radius:5px;}
        [type="checkbox"]::before{display: inline-flex;content:'';width: 10px;aspect-ratio: auto 1.25;background: url('/images/ico_chk.svg') no-repeat center / 100% auto;opacity: 0.5;}
        [type="checkbox"]:checked{background: var(--point-color01);border-color:var(--point-color01);}
        [type="checkbox"]:checked::before{opacity: 1;filter: var(--filter-white);}

        .contact-btn-box{margin-top:var(--row-gap20);display: flex;align-items: center;gap:var(--row-gap20);justify-content: space-between;}
        .contact-btn-box .policy{display: flex;align-items: center;gap:clamp(6px, 1vw, 12px);}
        .contact-btn-box .policy > button{font-size:var(--text-17);color:var(--black-color07);font-weight:500;text-decoration: underline;flex-shrink:0;}
        .contact-btn-box .main_more{flex-shrink:0;}

        @media (max-width:1300px) {
            .contact-btn-box{flex-direction: column;}
        }
        @media (max-width:1023px) {
            .main_contact .contact_box{flex-direction: column;}
            .main_contact .title_box{width:100%;}
        }
        @media (max-width:860px) {
            .write-form .desc{width:100%;}
        }
        @media (max-width:479px) {
            .write-form .desc{width:100%;}
            #wrap .captcha_box{flex-direction:column;}
        }
        @media (max-width:360px) {
            .captcha-box{flex-wrap: wrap;padding-bottom: 0;}
        }

    /* === complete === */
    #wrap .complete_box {width:100%;box-sizing:border-box;border:1px solid var(--border-color01);text-align: center;padding:var(--row-gap60);border-radius:var(--radius-15);}
    #wrap .complete_box .chk_ico{width: var(--row-gap70); height: var(--row-gap70); margin: 0 auto; background-color: var(--gray-bg01);}
    #wrap .complete_box .chk_ico .text-green-600 {color: var(--point-color01);}
    #wrap .complete_box h4 {font-size:var(--text-28);color:var(--black-color03);font-weight:600;margin-top: var(--row-gap30);}
    #wrap .complete_box p {font-size:var(--text-20);color:var(--black-color05);margin-top: var(--row-gap20);}
    #wrap .complete_box .view_btn {margin-top: var(--row-gap50);}
    
    @media (max-width:1023px) {
        #wrap .complete_box .chk_ico {width: var(--row-gap95); height: var(--row-gap95);}
    }
       

/*─────────────────────────────────────────────────────────
    단어장(vocab) 학습 진도
─────────────────────────────────────────────────────────*/
    .vocab-progress{margin-bottom:var(--row-gap40);border:1px solid var(--border-color01);border-radius:var(--radius-10);padding:var(--row-gap20);}
    .vocab-progress-head{display:flex;align-items:center;justify-content:space-between;gap:var(--row-gap15);flex-wrap:wrap;margin-bottom:var(--row-gap10);}
    .vocab-progress-label{font-size:var(--text-15);font-weight:600;color:var(--black-color03);}
    .vocab-progress-count{font-size:var(--text-15);color:var(--black-color06);}
    .vocab-progress-count b{color:var(--black-color01);}
    .vocab-progress-count .percent{color:var(--point-color03);font-weight:600;}
    .vocab-progress-bar{height:8px;border-radius:9999px;background:var(--gray-bg05);overflow:hidden;}
    .vocab-progress-fill{height:100%;border-radius:9999px;background:var(--point-color03);transition:all 0.3s;}
    .vocab-progress-guest{display:flex;align-items:center;justify-content:space-between;gap:var(--row-gap15);flex-wrap:wrap;}
    .vocab-progress-guest p{font-size:var(--text-15);color:var(--black-color06);}
    .vocab-progress-guest .btn-login{flex-shrink:0;display:inline-flex;align-items:center;padding:0 var(--col-gap24);height:44px;border-radius:9999px;background:var(--point-color01);color:var(--point-white);font-size:var(--text-15);font-weight:600;transition:background .2s;}

    .vocab-layout .bbs_table tr:has(.is-done){background:var(--point-color12);}

    /* over */
    @media (hover:hover) and (pointer:fine){
        .vocab-progress-guest .btn-login:hover{background:var(--point-color02);}
        .vocab-layout .bbs_table tbody tr:not(:has(.nodata)):hover{background:none;}
        .vocab-layout .bbs_table tbody tr:has(.is-done):hover{background:var(--point-color12);}
    }

    /* 유료회원 전환 안내 모달 */
    .vocab-modal-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--row-gap20);background:rgba(0,0,0,.5);}
    .vocab-modal-overlay[hidden]{display:none;}
    .vocab-modal{position:relative;width:100%;max-width:400px;background:var(--point-white);border-radius:var(--radius-15);padding:var(--row-gap40) var(--row-gap30) var(--row-gap30);text-align:center;box-shadow:var(--shadow-01);}
    .vocab-modal-close{position:absolute;top:var(--row-gap15);right:var(--row-gap15);width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--black-color08);font-size:var(--text-22);line-height:1;cursor:pointer;transition:background .15s;}
    .vocab-modal h3{font-size:var(--text-20);font-weight:700;color:var(--black-color01);margin-bottom:var(--row-gap15);}
    .vocab-modal p{font-size:var(--text-15);color:var(--black-color06);line-height:1.6;}
    .vocab-buy-price{font-size:var(--text-24);font-weight:700;color:var(--point-color01);margin-top:var(--row-gap15);}
    .vocab-buy-form{display:flex;flex-direction:column;gap:var(--row-gap10);margin-top:var(--row-gap20);}
    .vocab-buy-field input{width:100%;height:46px;border:1px solid var(--border-color02);border-radius:var(--radius-10);background:var(--point-white);padding:0 var(--col-gap17);font-size:var(--text-15);color:var(--black-color01);outline:none;transition:border-color .15s;}
    .vocab-buy-field input::placeholder{color:var(--black-color09);}
    .vocab-buy-field input:focus{border-color:var(--point-color01);}
    .vocab-buy-pay{display:flex;gap:var(--row-gap10);border:0;padding:0;margin:0;}
    .vocab-buy-pay-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:44px;border:1px solid var(--border-color02);border-radius:var(--radius-10);font-size:var(--text-14);color:var(--black-color06);cursor:pointer;transition:border-color .15s, color .15s, background .15s;}
    .vocab-buy-pay-opt:has(input:checked){border-color:var(--point-color01);color:var(--point-color01);background:var(--gray-bg01);font-weight:700;}
    /* .vocab-buy-pay-opt input{width:14px;height:14px;accent-color:var(--point-color01);} */
    .vocab-modal-actions{display:flex;flex-direction:column;gap:var(--row-gap10);margin-top:var(--row-gap25);}
    .btn-upgrade{display:inline-flex;align-items:center;justify-content:center;height:48px;border-radius:9999px;background:var(--point-color01);color:var(--point-white);font-size:var(--text-16);font-weight:700;transition:background .2s;}
    .btn-modal-cancel{display:inline-flex;align-items:center;justify-content:center;height:44px;border:0;border-radius:9999px;background:none;color:var(--black-color07);font-size:var(--text-14);cursor:pointer;transition:color .15s;}

    /* over */
    @media (hover:hover) and (pointer:fine){
        .vocab-modal-close:hover{background:var(--gray-bg05);}
        .btn-upgrade:hover{background:var(--point-color02);}
        .btn-modal-cancel:hover{color:var(--black-color01);}
    }

/*─────────────────────────────────────────────────────────
    찜하기 버튼(.pf-wish-btn) — 쇼핑몰 섹션(마이페이지/찜리스트) 공용.
    상품 썸네일 위에 올라가는 원형 하트 버튼. 클래스 자체엔 정의된 스타일이
    없던 상태라 여기서 최소한의 룩만 추가한다.
─────────────────────────────────────────────────────────*/
    .pf-wish-btn{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:0; border-radius:50%; background:rgba(255,255,255,.92); color:var(--black-color09); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.15); transition:color .15s, transform .15s;}
    .pf-wish-btn svg{width:18px; height:18px;}
    .pf-wish-btn.is-wished{color:#e11d48;}
    .pf-wish-btn.is-wished svg{fill:currentColor;}
    @media (hover:hover) and (pointer:fine){
        .pf-wish-btn:hover{transform:scale(1.08);}
    }

    /* 상품 카드 장바구니 버튼(.pf-card-cart-btn) — .pf-wish-btn 과 동일한 원형 룩,
       나란히 노출(그리드 썸네일 우상단). 리스트 모드용 --inline 복사본은 별도 레이아웃
       구현 전까지 숨겨 중복 노출을 막는다. */
    .pf-card-actions--overlay{position:absolute; top:10px; right:10px; z-index:2; display:flex; align-items:center; gap:8px;}
    .pf-card-actions--inline{display:none;}
    .pf-card-cart-btn{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:0; border-radius:50%; background:rgba(255,255,255,.92); color:var(--black-color09); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.15); transition:color .15s, transform .15s;}
    .pf-card-cart-btn svg{width:18px; height:18px;}
    .pf-card-cart-btn:disabled{opacity:.4; cursor:not-allowed;}
    @media (hover:hover) and (pointer:fine){
        .pf-card-cart-btn:hover:not(:disabled){color:var(--point-color01); transform:scale(1.08);}
    }

    /* 상품 목록 상단 — 총 개수 + 보기모드(그리드/리스트) 토글. 클래스 자체엔 정의된
       스타일이 없던 상태라 여기서 최소한의 룩만 추가한다. */
    .pf-view-bar{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--row-gap15, 16px);}
    .pf-view-count{font-size:var(--text-14); color:var(--black-color08);}
    .pf-view-toggle{display:inline-flex; border:1px solid var(--border-color02); border-radius:9999px; overflow:hidden;}
    .pf-view-btn{display:inline-flex; align-items:center; gap:6px; padding:7px 16px; font-size:var(--text-13, 13px); color:var(--black-color08); background:var(--point-white); border:0; cursor:pointer; transition:background .15s, color .15s;}
    .pf-view-btn + .pf-view-btn{border-left:1px solid var(--border-color02);}
    .pf-view-btn .pf-view-ico{width:16px; height:16px;}
    .pf-view-btn.is-active{background:var(--point-color01); color:var(--point-white);}

/* ── 2026-08-21 요청(김소영 과장): 제품 목록 카드의 찜하기·장바구니 아이콘 비노출 ── */
    .pf-card-actions,
    .pf-card-actions--overlay,
    .pf-card-cart-btn,
    .pf-card-wish{display:none !important;}

.sk-study .widget-head{display:none;}
.sk-study-inner{display:flex; align-items:center; gap:clamp(28px,3vw,34px);}
.sk-donut{position:relative; width:180px; height:180px; flex:0 0 180px;}
.sk-donut-svg{width:100%; height:100%; display:block;}
.sk-donut-fill{transition:stroke-dashoffset .9s cubic-bezier(.22,.9,.3,1);}
.sk-donut-center{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.sk-pct{font-size:40px; font-weight:700; color:#1B2E59; line-height:1;}
.sk-pct-sign{font-size:24px; font-weight:700; color:#1B2E59; margin-left:3px; align-self:center; margin-top:15px;}
.sk-study-body{flex:1 1 auto; min-width:0;}
.sk-study-title{font-size:clamp(22px,2.1vw,28px); font-weight:700; color:#1B2E59; margin:0 0 10px;}
.sk-study-sub{display:flex; align-items:center; gap:8px; margin:0 0 24px; font-size:16px; font-weight:700; color:#8DC63F;}
.sk-study-sub svg{width:26px; height:26px; flex:0 0 26px;}
.sk-stats{display:flex; align-items:center; margin:0 0 28px;}
.sk-stat{display:flex; align-items:center; gap:12px;}
.sk-stat em{font-style:normal; font-size:15px; color:#6b7280;}
.sk-stat b{font-size:30px; font-weight:700; line-height:1;}
.sk-done{color:#8DC63F;}
.sk-left{color:#111827;}
.sk-div{width:1px; height:22px; background:#d1d5db; margin:0 28px; flex:0 0 1px;}
.sk-study-cta{display:inline-block; padding:12px 30px; border-radius:12px; background:#1B2E59; color:#fff; font-weight:700; font-size:16px; text-decoration:none; transition:background .2s;}
.sk-study-cta:hover,.sk-study-cta:focus{background:#152447; color:#fff;}
@media (max-width:768px){
    .sk-study-inner{flex-direction:column; align-items:flex-start; gap:24px;}
    .sk-donut{width:160px; height:160px; flex:0 0 160px; align-self:center;}
    .sk-pct{font-size:38px;}
    .sk-pct-sign{font-size:18px; margin-top:10px;}
    .sk-study-title{margin-bottom:18px;}
    .sk-study-sub{margin-bottom:22px;}
    .sk-stats{margin-bottom:26px; flex-wrap:wrap;}
    .sk-div{margin:0 18px;}
    .sk-study-cta{width:100%; text-align:center;}
}

/* ============================================================
   말뭉치 라이브러리 — 첫걸음 어휘 / 대화 게시판 스킨
   ============================================================ */

/* 공통: 주제(말머리) 칩 */
.corpus-topic{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 12px;border-radius:var(--radius-10);background:var(--gray-bg05);color:var(--black-color06);font-size:var(--text-13);font-weight:600;white-space:nowrap;}
.corpus-empty{color:var(--black-color09);}

/* 상단 탭 — 난이도(색상) × 유형 */
.corpus-tabs{display:flex;flex-wrap:wrap;gap:var(--row-gap20);margin-bottom:var(--row-gap25);}
.corpus-tab-group{display:flex;align-items:center;gap:6px;}
.corpus-tab-level{font-size:var(--text-13);font-weight:700;color:var(--black-color07);padding-right:2px;}
.corpus-tab{display:inline-flex;align-items:center;font-size:var(--text-14);font-weight:600;padding:8px 18px;border-radius:var(--radius-10);border:1px solid var(--border-color01);background:var(--point-white);color:var(--black-color06);text-decoration:none;transition:background .15s, color .15s, border-color .15s;}
@media (hover:hover){
    .corpus-tab:not(.is-on):hover{border-color:var(--border-color02);color:var(--black-color01);}
}
.corpus-tab--lv1.is-on{background:var(--point-color03);border-color:var(--point-color03);color:var(--point-color01);}
.corpus-tab--lv2.is-on{background:var(--point-color05);border-color:var(--point-color05);color:var(--point-white);}
.corpus-tab--lv3.is-on{background:var(--point-color06);border-color:var(--point-color06);color:var(--point-white);}

/* 어휘 — 목록 표 (좌측 메뉴 없이 전체 너비) */
.corpus-vocab-table_wrap{width:100%;}
.corpus-vocab-table td.corpus-si-cell{text-align:left;padding-inline:var(--row-gap20);color:var(--black-color01);font-size:var(--text-16);font-weight:600;}
.corpus-vocab-table td.corpus-ko-cell{text-align:left;padding-inline:var(--row-gap20);line-height:1.6;}
.corpus-ko-meaning{display:block;color:var(--black-color01);font-weight:700;}
.corpus-ko-desc{display:block;color:var(--black-color07);font-size:var(--text-13);}
.corpus-vocab-table td.corpus-ko-cell .corpus-ko-desc{margin-top:2px;}

/* 어휘 — 상세보기 */
.corpus-vocab-view-head{display:flex;flex-direction:column;gap:var(--row-gap10);margin-bottom:var(--row-gap25);}
.corpus-vocab-view-si{font-size:var(--text-30);font-weight:700;color:var(--black-color01);margin:0;}
.corpus-vocab-view-ko{font-size:var(--text-16);line-height:1.8;color:var(--black-color03);padding:var(--row-gap25) var(--row-gap20);background:var(--gray-bg01);border-radius:var(--radius-15);}
.corpus-vocab-view-ko .corpus-ko-meaning{margin:0 0 6px;font-size:var(--text-18);font-weight:700;color:var(--black-color01);}
.corpus-vocab-view-ko .corpus-ko-desc{margin:0;color:var(--black-color06);}

/* 대화 — 카드 목록 (메신저 채팅창 스타일) */
.corpus-dialogue-list{display:flex;flex-direction:column;gap:var(--row-gap20);list-style:none;padding:0;margin:0 0 var(--row-gap25);}
.corpus-dialogue-card{border-radius:var(--radius-20);overflow:hidden;box-shadow:var(--shadow-01);}
.corpus-dialogue-card-head{display:flex;align-items:center;gap:var(--row-gap10);width:100%;padding:var(--row-gap15) var(--row-gap25);background:linear-gradient(120deg, var(--point-color01), var(--point-color02));border:0;font:inherit;text-align:left;cursor:pointer;}
.corpus-dialogue-card-head strong{font-size:var(--text-16);font-weight:700;color:var(--point-white);}
.corpus-dialogue-card-head .tag.notice{background:var(--point-color03);color:var(--point-color01);}
.corpus-dialogue-card-arrow{flex:0 0 20px;width:20px;height:20px;margin-left:auto;color:var(--point-white);transition:transform .2s ease;}
.corpus-dialogue-card-arrow svg{width:100%;height:100%;}
.corpus-dialogue-card.is-open .corpus-dialogue-card-arrow{transform:rotate(180deg);}
.corpus-dialogue-card-body{max-height:0;overflow:hidden;overflow-y:auto;background:var(--gray-bg02);transition:max-height .3s ease;}
.corpus-dialogue-card.is-open .corpus-dialogue-card-body{max-height:2000px;} /* 스크립트 실행 전 기본 펼침 보조 (JS 가 실제 높이로 덮어씀) */
.corpus-dialogue-card-body > *{padding:var(--row-gap25);margin:0;}
.corpus-dialogue-empty{text-align:center;color:var(--black-color09);padding:var(--row-gap60) 10px;list-style:none;}

/* 대화 — 상세보기 헤더 */
.corpus-dialogue-view-head h1{font-size:var(--text-24);font-weight:700;color:var(--black-color01);margin:0 0 var(--row-gap25);}
.corpus-dialogue-view-body{padding:var(--row-gap25);background:var(--gray-bg02);border-radius:var(--radius-20);margin-bottom:var(--row-gap30);}

/* 대화 턴 — 좌우 교차형 채팅 말풍선(카카오톡류 메신저 UI) */
.corpus-dialogue-chat{display:flex;flex-direction:column;gap:var(--row-gap15);list-style:none;padding:var(--row-gap30);margin:0;}
.corpus-chat-msg{display:flex;max-width:82%;}
.corpus-chat-msg--a{margin-right:auto;justify-content:flex-start;}
.corpus-chat-msg--b{margin-left:auto;justify-content:flex-end;}
.corpus-chat-bubble{min-width:0;padding:var(--row-gap10) var(--col-gap17);background:var(--point-white);border-radius:var(--radius-16) var(--radius-16) var(--radius-16) 4px;box-shadow:0 1px 3px rgba(20,30,60,.08);}
.corpus-chat-msg--b .corpus-chat-bubble{background:var(--point-color01);border-radius:var(--radius-16) var(--radius-16) 4px var(--radius-16);}
.corpus-chat-si{margin:0 0 4px;font-size:var(--text-20);color:var(--black-color01);}
.corpus-chat-ko{margin:0;font-size:var(--text-16);color:var(--black-color07);}
.corpus-chat-msg--b .corpus-chat-si{color:var(--point-white);}
.corpus-chat-msg--b .corpus-chat-ko{color:var(--point-white);}

@media (max-width:768px){
    .corpus-vocab-table_wrap .bbs_table tr{flex-direction: column;align-items: flex-start;}
    .corpus-vocab-table td.corpus-si-cell,
    .corpus-vocab-table td.corpus-ko-cell{padding:0;}
}
@media (max-width:520px){
    .corpus-chat-msg{max-width:92%;}
}

/*─────────────────────────────────────────────────────────
    약관/정책형 본문 페이지 (환불정책 등) — .policy-view
─────────────────────────────────────────────────────────*/
    .policy-view > h2{font-size:var(--text-34); font-weight:600; letter-spacing:-1px; color:var(--black-color01); padding-bottom:var(--row-gap20); margin-bottom:var(--row-gap20); border-bottom:2px solid var(--point-color01);}
    .policy-view > p{font-size:var(--text-16); line-height:1.8; color:var(--black-color12);}
    .policy-view > p:not(:last-child){margin-bottom:var(--row-gap40);}
    .policy-view h3{display:flex; align-items:center; gap:var(--row-gap10); font-size:var(--text-20); font-weight:600; color:var(--point-color01); letter-spacing:-.3px; margin-top:var(--row-gap40); padding-top:var(--row-gap30); border-top:1px solid var(--gray-bg05);}
    .policy-view h3:first-of-type{margin-top:0; padding-top:0; border-top:0;}
    .policy-view h3 + *{margin-top:var(--row-gap15);}
    .policy-view p{font-size:var(--text-16); line-height:1.8; color:var(--black-color12);}

    /* 조항 번호 목록 (제1조~제6조 하위 ol) */
    .policy-view > ol{counter-reset:policy-ol; list-style:none;}
    .policy-view > ol > li{counter-increment:policy-ol; position:relative; padding-left:26px; font-size:var(--text-16); font-weight:600; line-height:1.8; color:var(--black-color01);}
    .policy-view > ol > li:not(:last-child){margin-bottom:var(--row-gap20);}
    .policy-view > ol > li::before{content:counter(policy-ol) '.'; position:absolute; left:0; top:0; font-weight:700; color:var(--point-color01);}
    .policy-view > ol > li > strong{font-weight:600; color:var(--black-color01);}

    /* 조항 하위 세부 사유(- 대시 목록) */
    .policy-view ol > li > ul{list-style:none; margin-top:var(--row-gap10);}
    .policy-view ol > li > ul > li{position:relative; padding-left:14px; font-size:var(--text-15); font-weight:400; line-height:1.75; color:var(--black-color13);}
    .policy-view ol > li > ul > li:not(:last-child){margin-bottom:clamp(6px, 0.5vw, 8px);}
    .policy-view ol > li > ul > li::before{content:'-'; position:absolute; left:0; color:var(--black-color10);}

    /* 문의처 등 일반 정보 목록 (조항 번호 없이 나열) */
    .policy-view > ul{background:var(--gray-bg01); border-radius:clamp(6px, 0.83vw, 12px); padding:var(--row-gap20) var(--col-gap24); list-style:none;}
    .policy-view > ul > li{font-size:var(--text-16); line-height:1.8; color:var(--black-color12);}

    @media (max-width:768px){
        .policy-view > h2{font-size:var(--text-28); letter-spacing:-.8px;}
    }

/*─────────────────────────────────────────────────────────
    기본 싱할라어 회화·어휘 — 상단 안내 박스(안내문 + 출처) · 주제 선택
─────────────────────────────────────────────────────────*/
    .corpus-board-intro{display:flex;flex-direction:column;gap:8px;margin-bottom:var(--row-gap30);padding:var(--row-gap20) var(--row-gap25);border:1px solid var(--border-color01);border-radius:var(--radius-10);background:var(--point-white);}
    .corpus-board-intro-title{margin:0;font-size:var(--text-18);font-weight:700;color:var(--black-color01);letter-spacing:-.3px;line-height:1.5;}
    .corpus-board-intro-source{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:var(--text-14);line-height:1.6;color:var(--black-color07);}
    .corpus-board-intro-badge{flex-shrink:0;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:9999px;background:var(--gray-bg05);color:var(--black-color05);font-size:var(--text-13);font-weight:600;}

    .corpus-vocab-board .list_bar,.corpus-dialogue-board .list_bar{margin-top:var(--row-gap10);}
    .corpus-prefix-filter{display:flex;align-items:center;gap:10px;margin:0 0 0 auto;}
    .corpus-prefix-label{font-size:var(--text-14);font-weight:700;color:var(--black-color03);white-space:nowrap;}
    .corpus-prefix-select{-webkit-appearance:none;appearance:none;height:42px;min-width:240px;padding:0 40px 0 16px;border:1px solid var(--border-color01);border-radius:var(--radius-10);background:var(--point-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center/12px 8px;font-size:var(--text-15);font-weight:500;color:var(--black-color01);cursor:pointer;transition:border-color .2s, box-shadow .2s;}
    .corpus-prefix-select:focus{outline:none;border-color:var(--point-color01);box-shadow:0 0 0 3px rgba(27,46,89,.12);}
    @media (hover:hover){
        .corpus-prefix-select:hover{border-color:var(--border-color02);}
    }

    @media (max-width:768px){
        .corpus-board-intro{padding:16px;}
        .corpus-board-intro-title{font-size:var(--text-16);}
        .corpus-board-intro-source{font-size:var(--text-13);}
        .corpus-prefix-filter{width:100%;margin:0;}
        .corpus-prefix-select{flex:1;min-width:0;}
    }

/*─────────────────────────────────────────────────────────
    About 페이지 (회사 소개)
─────────────────────────────────────────────────────────*/
    .about-hero{padding:var(--row-gap100) 0 var(--row-gap80);background:linear-gradient(135deg,var(--point-color11),var(--point-color12));}
    .about-eyebrow{margin:0 0 var(--row-gap15);font-size:var(--text-14);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--point-color04);}
    .about-hero-title{margin:0 0 var(--row-gap25);font-size:var(--text-52);font-weight:800;line-height:1.3;letter-spacing:-1.5px;color:var(--point-color01);}
    .about-hero-title em{font-style:normal;color:var(--point-color03);}
    .about-hero-desc{max-width:720px;margin:0;font-size:var(--text-18);line-height:1.8;color:var(--black-color12);}

    .about-sec{padding:var(--row-gap90) 0;}
    .about-head{margin-bottom:var(--row-gap45);}
    .about-head h2{margin:0 0 var(--row-gap10);font-size:var(--text-36);font-weight:800;letter-spacing:-1px;color:var(--black-color01);}
    .about-sec-desc{margin:0;font-size:var(--text-17);line-height:1.7;color:var(--black-color06);}

    .about-card-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--col-gap30);margin:0;padding:0;list-style:none;}
    .about-card{padding:var(--row-gap40) var(--col-gap30);border:1px solid var(--border-color03);border-radius:var(--radius-20);background:var(--point-white);box-shadow:var(--shadow-01);}
    .about-card-ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:var(--row-gap20);border-radius:var(--radius-14);color:var(--point-white);}
    .about-card-ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
    .about-card--green .about-card-ic{background:var(--point-color03);}
    .about-card--orange .about-card-ic{background:var(--point-color05);}
    .about-card--navy .about-card-ic{background:var(--point-color06);}
    .about-card h3{margin:0 0 var(--row-gap10);font-size:var(--text-22);font-weight:700;color:var(--black-color01);}
    .about-card p{margin:0;font-size:var(--text-16);line-height:1.75;color:var(--black-color12);}

    .about-stats{background:var(--point-color01);}
    .about-stat-list{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--col-gap30);margin:0;text-align:center;}
    .about-stat dt{margin-bottom:var(--row-gap10);font-size:var(--text-15);color:var(--point-color08);}
    .about-stat dd{margin:0;font-size:var(--text-16);color:var(--point-white);}
    .about-stat dd strong{font-size:var(--text-44);font-weight:800;color:var(--point-color03);}

    .about-timeline{position:relative;margin:0;padding:0;list-style:none;}
    .about-timeline::before{content:"";position:absolute;top:8px;bottom:8px;left:139px;width:2px;background:var(--border-color01);}
    .about-timeline li{position:relative;display:flex;gap:var(--col-gap40);padding-bottom:var(--row-gap40);}
    .about-timeline li:last-child{padding-bottom:0;}
    .about-timeline time{flex:0 0 120px;padding-right:var(--col-gap30);font-size:var(--text-24);font-weight:800;color:var(--point-color01);text-align:left;}
    .about-timeline li::before{content:"";position:absolute;top:10px;left:132px;width:14px;height:14px;border:3px solid var(--point-white);border-radius:50%;background:var(--point-color03);box-shadow:0 0 0 2px var(--point-color03);}
    .about-timeline h3{margin:0 0 6px;font-size:var(--text-20);font-weight:700;color:var(--black-color01);}
    .about-timeline p{margin:0;font-size:var(--text-16);line-height:1.7;color:var(--black-color12);}

    .about-contact{padding-top:0;}
    .about-contact-band{display:flex;align-items:center;justify-content:space-between;gap:var(--col-gap30);padding:var(--row-gap50) var(--col-gap50);border-radius:var(--radius-30);background:var(--point-color12);border:1px solid var(--border-color03);}
    .about-contact-text h2{margin:0 0 var(--row-gap10);font-size:var(--text-30);font-weight:800;color:var(--point-color01);}
    .about-contact-text p{margin:0;font-size:var(--text-16);color:var(--black-color12);}
    .about-contact-links{display:flex;flex-wrap:wrap;gap:12px;}
    .about-btn-line{border:1px solid var(--point-color01);background:var(--point-white);color:var(--point-color01);}

    @media (hover:hover){
        .about-card{transition:transform .25s, box-shadow .25s;}
        .about-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-02);}
    }

    @media (max-width:1023px){
        .about-card-list{grid-template-columns:1fr;}
        .about-stat-list{grid-template-columns:repeat(2,1fr);row-gap:var(--row-gap40);}
        .about-contact-band{flex-direction:column;align-items:flex-start;}
    }
    @media (max-width:768px){
        .about-hero{padding:var(--row-gap60) 0 var(--row-gap50);}
        .about-hero-title{font-size:var(--text-34);letter-spacing:-1px;}
        .about-hero-desc{font-size:var(--text-16);}
        .about-sec{padding:var(--row-gap60) 0;}
        .about-head h2{font-size:var(--text-28);}
        .about-stat dd strong{font-size:var(--text-34);}
        .about-timeline::before{left:5px;}
        .about-timeline li{flex-direction:column;gap:6px;padding-left:28px;}
        .about-timeline li::before{left:0;}
        .about-timeline time{flex:none;padding-right:0;font-size:var(--text-20);}
        .about-contact-band{padding:var(--row-gap35) var(--col-gap20);}
    }

    /* 게시판 글쓰기 머리말(prefix) 선택 */
    .prefix-list{display:flex;flex-wrap:wrap;gap:8px;margin:var(--row-gap30) 0 var(--row-gap25);}
    .prefix-list label{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:1px solid var(--border-color01);border-radius:999px;background:var(--point-white);font-size:15px;color:var(--black-color12);cursor:pointer;line-height:1.4;transition:border-color .15s,background .15s;}
    .prefix-list label:hover{border-color:var(--point-color04);}
    .prefix-list label input[type=radio]{margin:0;accent-color:var(--point-color04);}
    .prefix-list label:has(input:checked){border-color:var(--point-color04);font-weight:700;color:var(--point-color01);}