/* jobcard.css */

.jobcard-container {
    max-width: 760px;
    margin: 30px auto;
    padding: 20px;
    border-radius: 8px;
}

.jobcard-title {
    text-align: center;
    color: #ffffff;
    margin-bottom: 60px;
    font-weight:bold;
    font-size:60px;
    font-family: 'omyu_pretty';
}

/* 분야별 탭 스타일 */
.field-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
    /*border-bottom: 2px solid #eee;*/
    font-family: 'omyu_pretty';
    gap:25px 25px;
}

.field-tab {
    /*background-color: #f0f0f0;*/
    /*border: 1px solid #ddd;*/
    /*border-bottom: none;*/
    background:unset;border:unset;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
    /*
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;*/
    transition: background-color 0.3s, color 0.3s;
    margin: 0 2px; /* 탭 간 간격 */
    position:relative;
}

.field-tab:hover {
    color: #430069;
    font-weight:bold;
}

.field-tab:hover::before {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #430069;
    position: absolute;
    left: 0;
    bottom: -3px;
}


.field-tab.active::before {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #430069;
    position: absolute;
    left: 0;
    bottom: -3px;
}

.field-tab.active {
    color: #430069;
    font-weight:bold;
    position: relative;
    z-index: 1;
    margin-bottom: -2px; /* border-bottom과 겹치게 */
}

/* 직업별 탭 컨테이너 스타일 */
.job-tabs-container {
    margin-bottom: 15px;
    padding-bottom: 0px;
}

.job-tabs {
    display: none; /* 기본적으로 숨김 */
    flex-wrap: wrap;
    gap: 10px; /* 직업 탭 간 간격 */
    justify-content: center;
    font-family: 'omyu_pretty';
}

.job-tabs.active {
    display: flex; /* 활성화된 직업 탭만 표시 */
}

.job-tab {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 12px 17px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 50px;
    transition: background-color 0.3s, color 0.3s;
    color: #131313;
}

.job-tab:hover {
    background-color: #131313;
    color:#fff;
}

.job-tab.active {
    background-color: #131313;
    color: white;
    border-color: #8b6bb7;
}

.no-job-message {
    text-align: center;
    color: #888;
    font-style: italic;
    width: 100%;
    padding: 20px;
}

/* 직업 상세 정보 표시 영역 */
/*
.job-details-display {
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    background-color: #fdfdfd;
}
*/
.no-details-message {
    text-align: center;
    color: #888;
    font-style: italic;
    padding: 50px 0;
}

/* 캐릭터 섹션 */
.character-section {
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-radius:15px;
    background:#a601fe;
    color:#fff;
    position: relative;
    border:3px solid #000;
}

.character-image {
    max-width: 250px;
    height: auto;
    margin-top:30px;
    margin-bottom: 5px;
    width: 100%;
}

.character-name {
    font-size: 35px!important; /* 요청하신 크기 */
    font-weight: bold;
    color: #333;
    margin-top: 20px;
    margin-bottom: 15px;
    font-family: 'CookieRun-Regular';
}

.character-sub-description {
    padding-top:90px;
    font-size: 30px;
    color: #fff;
    margin-bottom: 10px;
}

.character-sub-description span {
    font-weight:bold;
    color:#ffeb80;
    font-size:65px;
}


.character-description span.color8 {
    font-weight:bold;
    color:var(--color8);
    font-size:30px;

}

.character-description span.color3 {
    font-weight:bold;
    color:var(--color3);
    font-size:30px;
}


.character-description {
    font-size:30px;
    color: #fff;
    line-height: 1.6;
    margin: 0 auto;
    padding: 20px 90px 60px;
    word-break:keep-all;

}

.character-description span {
    font-weight:bold;
    color:#ffeb80;
    font-size:30px;
}

.chareng {position:absolute;font-size:106px;top:62%;left:50%;opacity: 0.4;
transform:translate(-50%, -50%);z-index:0;font-family: 'GongGothicMedium';
letter-spacing:-7px;line-height:115%;width:100%;padding:15px;word-break:break-all;
}

.chareng2 {font-size:86px;}
.chareng3 {font-size:78px;}

.charinfo {position: relative;z-index:2;}

/* 직업 정보 섹션 */
.job-info-section h4 {
    font-size: 1.5em;
    color: #007bff;
    margin-bottom: 20px;
    text-align: center;

}

.info-block {
    margin-bottom: 15px;
    padding: 40px;
    border-radius: 15px;
    background-color: var(--color10);
    color:#a7a7a7;
}

.info-block h5 {
    font-size: 27px;
    color: #000000;
    margin-top: 0;
    margin-bottom: 23px;
    font-family: 'SBAggroL';
    font-weight:bold;
    letter-spacing:-0.5px;
    word-break:keep-all;
}

.info-block ul {
    list-style: disc;
    padding-left: 25px;
    margin: 0;
}

.info-block ul li {
    margin-bottom: 5px;
    color: #000000;;
    line-height: 1.1;
    font-size:17px;
    font-family: 'Pretendard-Regular';
    line-height:160%;
    letter-spacing:-1px;
    word-break:keep-all;
}

.info-block ul li:has(span.nomark) {
    list-style:none;
    font-weight:bold;
    margin-top:10px;
    padding-left:0;
}


.info-block p {
    margin: 0;
    color: #000000;
    line-height: 160%;
    font-size:18px;
    font-family: 'Pretendard-Regular';
    letter-spacing:-0.5px;
    word-break:keep-all;
}

.textstr {position:relative;z-index:1;}
.textstr:before {position:absolute;content:'';display:inline-block;width:103%;
background:#f9c84c;top:50%;left:50%;height:110%;z-index:-1;transform:translate(-50%,-50%);}



/* --- 추가된 섹션 스타일 --- */

/* 설명 1, 2 섹션 */
.additional-info-section {
    margin-top: 0px;
    margin-bottom: 30px;
    text-align: left;
    font-size:30px;
    border-radius: 8px;
    font-family: 'omyu_pretty';
}

.explanation-line {
    color: #ffffff;
    line-height: 1.6;
    margin-bottom: 10px;
    font-family:'SBAggrom';
    font-size:35px;
    letter-spacing:-0.5px;
    word-break:keep-all;
}
.explanation-line span {
    color:#ffeb80;
}

.explanation-line:nth-of-type(1) {font-size:22px;margin-bottom:0;}


/* 슬라이드 섹션 */
.slide-section-wrapper {
    width: 100%;
    overflow: hidden;
    margin: 0px 0;
    position: relative;
    padding: 0;
    box-sizing: border-box;
    font-family: 'omyu_pretty';
    overflow-y: unset;
}

.slide-section-inner {
    width:100%;
    margin: 0 auto;
    position: relative;
    /* overflow: hidden; /* 이중으로 숨김 처리하여 혹시 모를 문제 방지 */ */
}

.slide-content-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
    /* JavaScript에서 동적으로 전체 너비를 설정할 것이므로, 여기서는 100%로 유지 */
    width: 100%;
}

.slide-item {
    flex-shrink: 0; /* 아이템이 줄어들지 않도록 */
    width: 100%; /* 각 슬라이드 아이템이 .slide-content-container의 100% 너비를 차지 (JavaScript가 계산) */
    display: flex;
    align-items: center;
    justify-content: center; /* 중앙 정렬 */
    color:#fff;
    padding: 40px 20px 0;
    box-sizing: border-box;
    background-color: #be00ff;
    font-family: 'omyu_pretty';
    min-height:300px;
}

.slidewp {max-width:600px;width:100%;margin:0 auto;display:flex;}

.slide-text-left {
    flex: 1; /* 왼쪽 텍스트 영역 */
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 35px;
    padding-top: 0px;
}

.slide-text-left h4 {
    font-size: 40px;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 35px;
    font-family: 'KCC-Ahnchangho';
}

.slide-name span {font-family:'pretendard';font-size:20px;padding-left:10px;}

.slide-text-left .slide-intro {
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 15px;
}

.slide-text-left .slide-history {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 25px;
    color: #ffffff;
}

.slide-text-left .slide-history li {
    margin-bottom: 2px;
    line-height: 1.2;
    font-family: 'omyu_pretty';
}

.slide-image-right {
    flex:1; /* 오른쪽 이미지 영역 고정 너비 */
    margin-left: 20px;
    text-align: center;
    position:relative;
}

.slide-image-right .slimgrwp {
    max-width: 450px;
    display:inline-block;
    height: auto;
    border-radius: 8px;
    width: 100%;
padding:15px 15px 0;}

.slide-image-right img {
    width:100%;
}

.slide-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width:860px;
}


.slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background:unset;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 30px;
    z-index: 10;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.slide-arrow:hover {
    background-color: rgba(0,0,0,0.8);
}

.prev-arrow {
    left: 40px; /* 컨테이너 바깥쪽 여백에 배치 */
}

.next-arrow {
    right: 40px; /* 컨테이너 바깥쪽 여백에 배치 */
}

.emptysp {background: var(--color4);
    display: inline-block;
    width: 100%;
    padding: 10px 0;height:100px;}


/* 다른 설명 섹션 */
.other-explanation-section {
    margin: 30px auto;
    text-align: center;
    padding: 20px;
    background-color: #bf83ff;
    max-width:1000px;
    width:100%;
}

.other-explanation-section p {
    color: #ffffff;
    line-height: 1.6;
    margin-bottom: 10px;
    font-family: 'SBAggrom';
    font-size: 35px;
    letter-spacing:-0.5px;
    word-break:keep-all;
}


.other-explanation-section p.otherexp2 {font-size:18px;color:var(--color1);line-height:140%;letter-spacing:-0.5px;
text-align: left;font-family: 'GongGothicMedium';}

/*.other-explanation-section p:nth-of-type(1) {font-size:22px;margin-bottom:0;}*/



/* 유튜브 섹션 */
.youtube-section {
    max-width:1000px;
    margin: 30px auto;
    padding: 20px;

}

.youtube-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));/* 1줄에 3개 (반응형) */
    gap: 20px;
}

.youtube-item {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 비율 (높이/너비 * 100%) */
    height: 0;
    overflow: hidden;
    background-color: #000;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.youtube-item iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}


.ability-item {display:block;}
.abilities-grid {display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;}

.ability-item {text-align:center;}

.abilities-grid .ability-item p.ability-name {text-align: center;
    font-size: 15px;
    border: 2px solid #a7a7a7;
    border-radius: 10px;
    color:#a7a7a7;
    padding: 4px 8px;}

.ability-text-white {color:#fff;border-color:#ffffff;}

.abilities-grid > .ability-text-purple > p.ability-name {
    color:var(--color3);border-color:var(--color3);
font-weight:bold;}



@media (max-width: 991px) {
    .slide-flex {width:85%;}
    .slide-image-right {flex: 1; margin-left: 20px;
    text-align: center; position: relative;}

    .slide-text-left h4 {font-size: 25px; margin-bottom: 20px;}

.slide-name span {font-family:'pretendard';font-size:18px;padding-left:10px;}


}

.pcview {display:block;}
.moview {display:none;}
/* 모바일 반응형 (선택 사항) */
@media (max-width: 768px) {

.pcview {display:none;}
.moview {display:block;}


.field-tabs{gap:3px 5px;}

.field-tab {font-size:18px;line-height:160%;margin-bottom:10px;padding:4px 12px;}
.field-tab.active::before {bottom:5px;}
.field-tab.active {margin-bottom:5px;}

.job-tab {font-size:16px;}

.info-block h5 { font-size: 18px;}
.info-block ul li { font-size: 15px;}
.info-block p { font-size: 15px;}


.ltext {}

    .slide-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    width: 100%;
    }
    .emptysp {display:none;}

    .slide-section-wrapper {
        padding: 0 0px; /* 모바일에서 여백 줄이기 */
    }
    .prev-arrow {
        left: 0px; /* 모바일에서 화살표 위치 조정 */
    }
    .next-arrow {
        right: 0px; /* 모바일에서 화살표 위치 조정 */
    }
    .slide-item {
        flex-direction: column; /* 모바일에서 세로 정렬 */
        text-align: center;
        padding:20px;
    }
    .slide-text-left {
        padding-right: 0;
        padding-top: 25px;
    }
    .slide-image-right .slimgrwp {
    height: auto;
    border-radius: 8px;
    position: relative;
    left: unset;
    bottom:unset;
    width: 100%;
    max-width: 260px;
    padding:0;
}

    .youtube-grid {
        grid-template-columns: 1fr; /* 모바일에서 1줄에 1개 */
    }

.slide-image-right {margin-left:0;}

.additional-info-section {font-size:22px;margin-bottom:0;margin-top:35px;}




/********상단 캐릭터 섹션**********/
.character-sub-description {padding-top:50px;font-size:22px;padding-left: 15px;
    padding-right: 15px;word-break: keep-all;line-height: 140%;}
.character-sub-description span {font-size:32px;}
.character-image { max-width: 200px; margin-top: 0; margin-bottom: 5px;width: 100%;}
.character-description {font-size: 18px; padding: 0px 20px 15px;line-height:140%;}
.character-description span.color8 { font-size: 20px;}
.character-description span.color3 { font-size: 20px;}

.character-sub-description {font-size:22px;letter-spacing:-0.5px;padding-top:50px;}
.character-sub-description span {font-size:38px;}

.chareng { font-size: 63px; top: 52%; letter-spacing: -3px;  line-height: 115%;word-break:keep-all;}
.chareng2 { font-size: 56px;}
.chareng3 { font-size: 45px;}

.ltext {word-break: keep-all;line-height: 140%;letter-spacing:-0.5px;}


.explanation-line { font-size:20px;word-break: keep-all;line-height: 140%;
    line-height: 140%;letter-spacing:-0.5px;text-align:center;}
.explanation-line:nth-of-type(1) {font-size:18px;}

.other-explanation-section p {font-size:20px;word-break: keep-all;line-height: 140%;
    line-height: 140%;letter-spacing:-0.5px;;}
.other-explanation-section p:nth-of-type(1) {font-size:18px;}

/************** 슬라이드 *******************/
.slide-text-left .slide-history {font-size:20px;}


.ability-item {display:none;}
.ability-text-purple {display:block;}

}  /*** 768px end **/

@media(max-width:500px) {
.chareng { font-size: 50px;}
.chareng2 { font-size: 45px;}
.chareng3 { font-size: 40px;}

}

/******* 하단 유튜브 섹션*********/

/* 새로 도입된 미디어 갤러리 컨테이너의 기본 설정 */



.main {
    background:#bf83ff;
    display: inline-block;
    width: 100%;
    padding: 10px 0;
}
.emptysp {margin-bottom:-10px;}

/* 새로 도입된 미디어 갤러리 컨테이너의 기본 설정 */
.media-gallery-container {
    display: block; /* 메인 미디어와 썸네일 리스트가 수직으로 쌓이도록 */
    border-radius: 8px;
}

/* 메인 미디어 영역 (상단에 크게 하나만) */
.main-media-area {
    width: 100%;
    padding: 0px;
    border-radius: 15px;
    text-align: center;
    margin-bottom: 50px;
    outline: 3px solid #000000;
}

.main-media-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 비율 유지 (높이 / 너비 * 100) */
    height: 0;
    overflow: hidden;
    background-color: #000;
    border-radius:15px;
}

.main-media-wrapper iframe,
.main-media-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: contain;
    border-radius: 15px;
}

.main-media-title {
    font-size: 25px;
    font-weight: bold;
    margin-top: 10px;
    color: var(--color5);
    text-align: left;
    margin-bottom: 20px;
    font-family: 'omyu_pretty';
    display:none;
}

.main-media-description {
    font-size: 24px;
    color: #ffffff;
    padding: 0;
    word-break: keep-all;
    text-align: left;
    font-family: 'omyu_pretty';
    display:none;
}
/* 썸네일 리스트 영역 (2개씩 배치) */
.thumbnail-list-area {
    /*width: 100%;
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);*/

    max-width: 1000px;
    margin: 00px auto;
    padding: 20px 0;
}

.thumbnail-grid {
    /*
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    */
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));*/
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.thumbnail-item {
    /*
    border: 1px solid #eee;
    border-radius: 5px;
    overflow: hidden;
    width: calc(50% - 5px);
    display: flex;
    flex-direction: column;
    */
    position: relative;
    width: 100%;
    height: 100%;

    border-radius: 15px;
/*
    background-color: #000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
}

.thumbnail-item iframe {
    position: relative;
    width: 100%;
    height: 30vh;
    border: 3px solid #000;
    border-radius:15px;
    background:#000;
}


.thumbnail-grid .thumbnail-item a {width:100%;display:inline-block;}

.thumbnail-grid .thumbnail-item a img {
/* 썸네일 항목에 대한 hover 효과가 없다면 아래 CSS는 제거해도 됩니다. */
/* .thumbnail-item:hover {
    box-shadow: none;
    transform: none;
    */
border: 3px solid #000;
    border-radius:15px;
    width:100%;
    height:auto;
}

.thumbnail-image-preview-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 비율 유지 */
    height: 0;
    overflow: hidden;
    background-color: #000;
}

.thumbnail-image-preview-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/**************** foot wid**********************/
#dynamic-apms-widget-container {margin: 30px auto; padding: 20px;}
.character-posts-container { margin: 20px auto;max-width:1040px; width:100%;}
.posts-grid { display: flex; gap: 15px; flex-direction: row; flex-wrap: wrap; }

.footwidtit {font-size: 35px;color: #000000; margin-top: 0; margin-bottom: 23px;
    font-family: 'SBAggroL'; font-weight: bold;}

.post-item { transition: all 0.3s ease;border: 1px solid #ddd;
    padding: 0px;
    margin: 10px 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex:1 1 calc((100%/4) - 15px);
display:flex;
flex-direction: column;
overflow:hidden;
background:#f6f9fe;
flex-grow:0;
     }

.post-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
.post-item h4 a{white-space: nowrap;overflow: hidden;display: block;text-overflow: ellipsis;font-weight:bold;}
.post-item h4 a:hover { color: #007bff !important; }
.post-item h4 {width:100%;display:inline-block;padding:15px;font-size:15px;padding-bottom:0px;}

.post-item img{height: 100%;max-height: 200px; }

.content-preview {

    line-height: 1.6;
    word-break: break-word;
    margin-top:auto;
    padding-left:15px;
    padding-right:15px;
    font-size:12px;
    padding-bottom:15px;
    color:#555;
}
.post-meta span {
    display: inline-block;
    padding: 2px 8px;
    background: #f8f9fa;
    border-radius: 12px;
    margin-right: 8px;
}



/* 반응형 디자인: 767px 이하 */
@media (max-width: 767px) {
    .media-gallery-container {
        flex-direction: column;
    }

    .thumbnail-grid { /*display: grid;grid-template-columns: 1fr;gap: 20px;*/
display: flex;flex-direction: row; flex-wrap: wrap; align-items: center; gap:20px; }
    .thumbnail-list-area {padding: 20px 10px;}
    .main-media-wrapper iframe, .main-media-wrapper img {
    border: 3px solid #000000;
    border-radius: 15px;
    background: #000000;
}
.thumbnail-grid .thumbnail-item a img { width:100%;}

    .main-media-area {padding:10px;}

    .main-media-area, .thumbnail-list-area {
        width: 100%;
        margin-bottom: 15px;
    }
    .thumbnail-item {
        width: 100%;
        height:100%;
        padding-bottom:0;
    }
    .main-media-title {
        font-size: 20px;
    }
    .main-media-description {
        font-size: 18px;
    }

    .thumbnail-item iframe {
    position: relative;
    width: 100%;
    height: 100%;
    border: 3px solid #000;
    border-radius: 15px;
}



.post-item {flex:1 1 calc((100%/2) - 15px);flex-grow:0;}
.post-item h4 a{white-space: wrap;overflow: unset;display: block;text-overflow: ellipsis;font-size:15px;}
.footwidtit {font-size:18px;}

}