/* ============================================================
   NanumSquare 웹폰트 로드
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css');


/* ============================================================
   2열 오른쪽 영역
   ============================================================ */

.wp-block-columns:has(.steel-kboard-marker){
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    gap:0!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
}

/* 좌측 사이드바 폭은 여기서 지정하지 않음 */
.wp-block-columns:has(.steel-kboard-marker)
> .wp-block-column:first-child{
    margin-top:0!important;
    margin-bottom:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
    box-sizing:border-box!important;
}

/* 오른쪽 콘텐츠 */
.wp-block-columns:has(.steel-kboard-marker)
> .wp-block-column:last-child{
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
}


/* ============================================================
   제목 영역 - PC
   왼쪽으로 총 100px 이동
   위로 20px 이동
   ============================================================ */

.steel-page{
    position:relative;

    width:calc(80% + 100px);
    height:auto;

    margin:0 10% 80px;
    margin-left:calc(10% - 100px);

    padding-top:60px;

    overflow:hidden;
    background:#fff;
    box-sizing:border-box;
}

.page_title{
    display:block;
    width:100%;
    margin:0;

    padding:0 20px 0 50px;

    line-height:50px;

    border-bottom:1px solid #e79090;

    color:#222;
    background:#fff;

    box-sizing:border-box;
}

.page_title a{
    display:flex;
    align-items:baseline;
    width:100%;

    color:#222!important;
    text-decoration:none!important;
}


/* ============================================================
   PC 한글 제목
   NanumSquare / 36px / 400 / 흑색
   ============================================================ */

.page_title .steel-title-ko{
    display:inline-block;

    font-family:"NanumSquare", sans-serif;
    font-size:36px;
    font-weight:400;
    line-height:25px;

    color:#000!important;
}


/* ============================================================
   PC 영어 제목
   ============================================================ */

.page_title .steel-title-en{
    display:inline-block;

    margin-left:30px;

    font-size:2em;
    font-weight:normal;
    line-height:50px;

    color:#ccc!important;
}


/* ============================================================
   설명문
   ============================================================ */

.page_title_2{
    display:block;

    width:100%;
    margin:0;

    padding:0 20px 0 50px;

    line-height:45px;
    font-size:1.2em;

    color:#444;
    font-weight:100;

    text-align:left;

    box-sizing:border-box;
}


/* ============================================================
   KBoard
   ============================================================ */

.wp-block-columns:has(.steel-kboard-marker)
> .wp-block-column:last-child
.wp-block-shortcode{
    width:100%!important;
    max-width:none!important;

    margin:0!important;
    padding:0!important;

    box-sizing:border-box!important;
}

.wp-block-columns:has(.steel-kboard-marker)
> .wp-block-column:last-child
.kboard-wrapper,

.wp-block-columns:has(.steel-kboard-marker)
> .wp-block-column:last-child
[id^="kboard-"]{
    width:100%!important;
    max-width:none!important;

    margin:0!important;

    padding:0 10% 10%!important;

    box-sizing:border-box!important;
}

.steel-kboard-marker{
    display:none!important;
}


/* ============================================================
   모바일
   기존 상태 그대로 유지
   ============================================================ */

@media screen and (max-width:900px){

    .steel-page{
        width:calc(100% - 20px)!important;
        max-width:none!important;

        margin:0 10px 30px!important;

        padding-top:30px!important;

        overflow:hidden!important;
        background:#fff;

        box-sizing:border-box!important;
    }

    .page_title{
        display:block!important;

        width:100%!important;

        margin:0!important;

        padding:0 5px 1px!important;

        line-height:1.3!important;
        font-size:18px!important;

        border-bottom:1px solid #e79090!important;

        color:#000!important;

        white-space:normal!important;
        word-break:keep-all!important;
        overflow-wrap:break-word!important;

        box-sizing:border-box!important;
    }

    .page_title a{
        display:flex!important;

        flex-direction:column!important;
        align-items:flex-start!important;

        width:100%!important;

        color:#000!important;
        text-decoration:none!important;

        white-space:normal!important;
    }

    .page_title .steel-title-en{
        display:block!important;

        order:1!important;

        margin:0 0 3px 83px!important;
        padding:0!important;

        color:#eaeaea!important;

        font-size:22px!important;
        font-weight:500!important;
        line-height:1.2!important;

        white-space:nowrap!important;
    }

    .page_title .steel-title-ko{
        display:block!important;

        order:2!important;

        margin:0 0 0 15px!important;
        padding:0!important;

        color:#000!important;

        font-size:18px!important;
        font-weight:900!important;
        line-height:1.05!important;

        letter-spacing:-0.3px!important;
    }

    .page_title_2{
        display:block!important;

        width:90%!important;
        margin:0 auto!important;

        padding:10px 0 0!important;

        line-height:1.55!important;
        font-size:12px!important;

        color:#444;
        font-weight:100;

        text-align:left!important;

        white-space:normal!important;
        word-break:keep-all!important;
        overflow-wrap:break-word!important;

        box-sizing:border-box!important;
    }

    .wp-block-columns:has(.steel-kboard-marker)
    > .wp-block-column:last-child
    .wp-block-shortcode{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;

        margin:0!important;
        padding:0!important;

        box-sizing:border-box!important;
        overflow:hidden!important;
    }

    .wp-block-columns:has(.steel-kboard-marker)
    > .wp-block-column:last-child
    .kboard-wrapper,

    .wp-block-columns:has(.steel-kboard-marker)
    > .wp-block-column:last-child
    [id^="kboard-"]{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;

        margin:0!important;

        padding:0 10px 30px!important;

        box-sizing:border-box!important;
    }

    .wp-block-columns:has(.steel-kboard-marker)
    > .wp-block-column:last-child
    .kboard-wrapper *{
        max-width:100%;
        box-sizing:border-box;
    }

    .wp-block-columns:has(.steel-kboard-marker)
    > .wp-block-column:last-child img{
        max-width:100%!important;
        height:auto!important;
    }
}


/* ============================================================
   작은 스마트폰
   ============================================================ */

@media screen and (max-width:480px){

    .page_title{
        font-size:17px!important;
        line-height:1.3!important;
        padding-bottom:1px!important;
    }

    .page_title .steel-title-en{
        font-size:22px!important;
        line-height:1.2!important;
        margin-left:80px!important;
        color:#eaeaea!important;
    }

    .page_title .steel-title-ko{
        font-size:17px!important;
        font-weight:900!important;
        line-height:1.05!important;
        margin-left:15px!important;
        color:#000!important;
    }

    .page_title_2{
        width:90%!important;
        margin:0 auto!important;
        padding-top:10px!important;
        font-size:11px!important;
        line-height:1.5!important;
        text-align:left!important;
    }
}