/* 폰트 */
@font-face {
    font-family: 'NanumSquare';
    font-weight: 300;
    src: url('../fonts/NanumSquareL.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'NanumSquare';
    font-weight: 400;
    src: url('../fonts/NanumSquareR.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'NanumSquare';
    font-weight: 700;
    src: url('../fonts/NanumSquareB.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'NanumSquare';
    font-weight: 800;
    src: url('../fonts/NanumSquareEB.woff2') format('woff2');
    font-display: swap;
}

/* 레이아웃 공통 */
body { display: flex; margin: 0; padding: 0; font-family: sans-serif; height: 100vh; }
.content { flex: 1; background: #111; }
iframe { width: 100%; height: 100%; border: none; }

/* 사이드바 공통 */
.sidebar * { margin: 0; padding: 0; box-sizing: border-box; }
.sidebar { width: 283px; background: #222; color: #fff; padding: 34px 23px 80px 19px; box-sizing: border-box; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #555 transparent;}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: #555; border-radius: 8px; border: 2px solid #222; }
.sidebar::-webkit-scrollbar-thumb:hover { background: #00cbc6; }
.sidebar a { text-decoration: none;  }
.sidebar ul li::marker { content: ""; }

/* 사이드바 로고 */
.sidebar-logo { margin-bottom: 29px; text-align: center;  display: block; }
.sidebar-logo img { width: 165px; height: auto;}

/* 사이드바 언어 선택 */
.sidebar .lang {display: flex; gap: 18px; justify-content: flex-end; }
.sidebar .lang > a , .sidebar .lang > button{position:relative; color: #FFF; opacity: 0.5; font-family: NanumSquare; font-size: 18px; font-style: normal; font-weight: 700; line-height: 120%; /* 21.6px */ letter-spacing: -0.36px; background-color: transparent; border: none; cursor: pointer;}
.sidebar .lang > a.active , .sidebar .lang > button.active {opacity: 1;}
.sidebar .lang > a::before , .sidebar .lang > button::before {width:1px; height:13px; content: ''; display: block; background-color: #fff; position: absolute; top:2.5px; left:-10px;}
.sidebar .lang > a:first-of-type::before , .sidebar .lang > button:first-of-type::before {display: none;}

/* 사이드바 카탈로그 리스트 */
.sidebar h2 {color: #FFF; font-family: NanumSquare; font-size: 20px; font-style: normal; font-weight: 800; line-height: normal; margin-top:36px;}
.sidebar h3 {font-family: NanumSquare; font-size: 18px; font-style: normal; font-weight: 700; line-height: normal; }
.sidebar .catalog-list { list-style: none; padding: 0; margin-top:24px; gap:30px; display: flex; flex-direction: column; }
.sidebar .catalog-list > li {padding-left:11px; border-left: 2px solid #fff;}
.sidebar .catalog-list > li.col01 {border-left-color: #CF9800;}
.sidebar .catalog-list > li.col01 h3 {color: #CF9800;}
.sidebar .catalog-list > li.col02 {border-left-color: #9ED342;}
.sidebar .catalog-list > li.col02 h3 {color: #9ED342;}
.sidebar .catalog-list > li.col03 {border-left-color: #41D09F;}
.sidebar .catalog-list > li.col03 h3{color: #41D09F;}
.sidebar .catalog-list > li.col04 {border-left-color: #00A9FF;}
.sidebar .catalog-list > li.col04 h3{color: #00A9FF;}
.sidebar .catalog-list > li.col05 {border-left-color: #B046FF;}
.sidebar .catalog-list > li.col05 h3 {color: #B046FF;}
.sidebar .catalog-list-item {margin-top:10px;}
.sidebar .catalog-list-item > li {display: flex; justify-content: space-between; align-items: center;  border-bottom:1px solid rgba(255, 255, 255, 0.30); gap:7px; }
.sidebar .catalog-list-item > li a.catalog-link {width:100%; color: #FFF; font-family: NanumSquare; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; padding:8px 0; display:block;}
.sidebar .catalog-list-item > li a.download-btn {width:14px; flex-shrink:0; text-indent: -9999px; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 8.92871V12.5001H13V8.92871" stroke="white" stroke-width="1.5"/><path d="M4 6.25L7 8.92857L10 6.25" stroke="white" stroke-width="1.5"/><path d="M7 0V8.48214" stroke="white" stroke-width="1.5"/></svg>'); width:14px; height:14px; display:inline-block; vertical-align:middle; }