@font-face {
    font-display: swap;
    font-family: 'gangwontuntun';
    src: url('/public/font/gangwontuntun.woff') format('woff');
}

:root {
    --bg-page1: #F5F2FB;
    --bg-page2: #FFFFFF;
    --bg-element1: #FFFFFF;
    --bg-element2: #FDFDFD;
    --bg-element3: #F9F9F9;
    --bg-element4: #F5F5F5;
    --bg-element5: #222222;
    --bg-element6: #343A40;
    --bg-element7: #FFFFFF;
    --bg-element8: #FBFDFC;
    --bg-invert: #1E1E1E;
    --bg-inline-code: #E9ECEF;
    --bg-tag: #F8F9FA;
    --text1: #222222;
    --text2: #828282;
    --text3: #868E96;
    --text4: #CED4DA;
    --border1: #343A40;
    --border2: #DBDBDB;
    --border3: #DEE2E6;
    --border4: #F1F3F5;
    --primary1: #12B886;
    --primary2: #20C997;
    --destructive1: #FF6B6B;
    --destructive2: #FF8787;
    --button-text: #FFFFFF;
    --slight-layer: rgba(0,0,0,0.05);
    --opaque-layer: rgba(249,249,249,0.85);
    --editor-footer: #FFFFFF;
    --prism-bg: #fbfcfd;
    --prism-default-text: #24292e;
    --prism-selection-bg: rgba(0,0,0,0.15);
    --prism-code-block-bg: #fbfcfd;
    --prism-code-1: #969896;
    --prism-code-2: #24292e;
    --prism-code-3: #a626a4;
    --prism-code-4: #FF6868;
    --prism-code-5: #0184bc;
    --prism-code-6: #50a14f;
    --prism-code-7: #a626a4;
    --prism-code-8: #005cc5;
    --prism-code-9: #a626a4;
    --prism-line-number: #585c63;
    --main-code: #904AE8;
    --warning-color-1: #dc3545;
}

* { margin: 0; padding: 0; box-sizing: border-box !important; list-style: none; text-decoration: none; outline: none; border: none; background: transparent; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; color: #222222; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #904AE8; border-radius: 0.5rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
*::-webkit-scrollbar-track { background: #CCCCCC; border-radius: 0.5rem; }
html, body { width: 100%; height: 100%; overflow-x: hidden; min-height: 100vh; }
svg { user-select: none; pointer-events: none; }

.no-content.none { display: none; }
.no-content{ padding: 60px 0; row-gap: 40px; width: 100%; max-width: 1200px; height: inherit; margin: 0 auto; display: none; flex-direction: column; justify-content: center; align-items: center; }
.no-content-info{ row-gap: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.no-content-info-text{ white-space: pre; font-size: 1.5rem; font-weight: 400; }

/* header */
header {width:100%; box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.01); position:sticky; left: 0; top: 0; z-index:1000;}
footer {
    background-color: #F9FAFB;
    width: 100%;
    min-height:220px;
    padding-top: 3rem;
    padding-bottom: 3rem;
    position: relative;
    margin-top: auto;
    bottom: 0;
}

.CTG-01 { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }
.CTG-02 { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }
.CTG-03 { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }

.CTG-01:empty:before { content: '　'; }
.CTG-02:empty:before { content: '　'; }
.CTG-03:empty:before { content: '　'; }

.MAIN-01 { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }
.MAIN-02 { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }
.MAIN-03 { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }
.MAIN-04 { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }
.MAIN-05 { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }

.MAIN-01:empty:before { content: '　'; }
.MAIN-02:empty:before { content: '　'; }
.MAIN-03:empty:before { content: '　'; }
.MAIN-04:empty:before { content: '　'; }
.MAIN-05:empty:before { content: '　'; }

.cl__footer--header > img:first-child { width: 110px; }
.cl__footer--header > svg:first-child { width: 110px; }

p { margin: 0; padding: 0; }

.video iframe {
    max-width: 100%;
    max-height: 100%;
}
.video.stuck {
    position: fixed;
    bottom:40px;
    right: 40px;
    width: 400px;
    height: 260px;
    transform: translateY(100%);
    animation: fade-in-up 0.75s ease forwards;
    z-index: 1;
}

/* modal */
.modal-header {background-color: #f5f5f5;}

.policy__wrapper {
    padding: 80px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.policy__container {
    width: 100%;
    max-width: 700px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.policy__contents {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 40px;
}

.policy__contents--item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 1.2rem;
}

.policy__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.policy__text {
    margin: 0;
    font-size: 16px;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.5rem;
}

.policy__text--sub {
    margin: 0;
    font-size: 16px;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.5rem;
}

.policy__text--strong {
    color: #904AE8;
    font-weight: 700;
}

.cl__top                   { padding: 0 1.25rem; position: relative; z-index: 35; width: 100%; height: 60px; background: #F6F6F6; }
.cl__top--container        { margin: 0 auto; max-width: 1200px; width: 100%; height: 100%; display: flex; justify-content: flex-end; align-items: center; gap: 15px; }
.cl__top--state            { padding: 0 15px; height: 36px; display: inline-flex; justify-content: center; align-items: center; border-radius: 10px; overflow: hidden; text-align: center; cursor: pointer; }
.cl__top--state.join       { background: #FF6868; color: #FFFFFF; }
.cl__top--state.wait       { background: #AAAAAA; color: #FFFFFF; }
.cl__top--update           { padding: 4px 10px; position: relative; height: 36px; display: inline-flex; justify-content: center; align-items: center; gap: 4px; border-radius: 10px; border: 1px solid #FF6868; background: #FFFFFF; cursor: pointer; }
.cl__top--update svg       { width: 24px; }
.cl__top--update span      { font-size: 16px; font-weight: 700; color: #FF6868; }
.cl__top--update.disabled { border: 1px solid #777777; }
.cl__top--update.disabled path { fill: #777777; }
.cl__top--update.disabled span { color: #777777; }
.cl__top--menu             { position: relative; height: 36px; display: flex; justify-content: center; align-items: center; gap: 15px; }
.cl__top--menu-item        { font-size: 16px; font-weight: 400; color: #222222; }
.cl__top--menu-line        { width: 1px; height: 14px; border-left: 1px solid #AAAAAA; }
.cl__top--user             { position: relative; display: grid; grid-template-columns: 1fr auto; }
.cl__top--user:before      { content: ''; position: absolute; left: 0; top: 100%; width: 100%; height: 50%; background: transparent; }
.cl__top--user-profile     { position: relative; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; background: #F5F2FB; border: 1px solid #DBDBDB; cursor: pointer; }
.cl__top--user-profile img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.cl__top--user-info        { padding: 24px 20px; position: absolute; right: 0; top: calc(100% + 8px); width: 360px; display: none; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; background: #FFFFFF; border: 1px solid #DBDBDB; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); }
.cl__top--user-type        { padding: 4px 8px; display: inline-flex; justify-content: center; align-items: center; gap: 4px; border-radius: 20px; background: #F6F6F6; }
.cl__top--user-type svg    { width: 12px; }
.cl__top--user-type span   { font-size: 14px; font-weight: 700; color: #828282; }
.cl__top--user-name        { width: 100%; display: inline-flex; justify-content: flex-start; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 400; color: #904AE8; }
.cl__top--user-name strong { font-size: 16px; font-weight: 700; color: #904AE8; }
.cl__top--user-resource    { padding: 12px 0; width: 100%; display: inline-flex; justify-content: center; align-items: center; border: 1px solid #FF6868; border-radius: 6px; font-size: 16px; font-weight: 700; color: #FF6868; background: #FFFFFF; cursor: pointer; }
.cl__top--user-qr          { padding: 12px 0; width: 100%; display: inline-flex; justify-content: center; align-items: center; border: 1px solid #904AE8; border-radius: 6px; font-size: 16px; font-weight: 700; color: #FFFFFF; background: #904AE8; cursor: pointer; }
.cl__top--user-menu        { padding-top: 10px; width: 100%; display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid #DBDBDB; }
.cl__top--user-item        { padding: 10px 5px; width: 100%; display: grid; grid-template-columns: 24px auto; place-items: center flex-start; gap: 10px; overflow: hidden; cursor: pointer; }
.cl__top--user-item img    { width: 24px; }
.cl__top--user-item svg    { width: 24px; }
.cl__top--user-item span   { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 500; color: #222222; }
.cl__top--user-func        { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; overflow: hidden; }
.cl__top--user-btn         { padding: 12px 0; width: 100%; display: flex; justify-content: center; align-items: center; gap: 5px; border-radius: 6px; background: #F6F6F6; overflow: hidden; cursor: pointer; }
.cl__top--user-btn.kakaotalk:before { content: url("/public/images/icon/icon-kakaotalk.svg"); width: 24px; height: 24px; }
.cl__top--user-btn img     { width: 16px; }
.cl__top--user-btn svg     { width: 16px; }
.cl__top--user-btn span    { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 500; color: #222222; }
.cl__top--user:hover .cl__top--user-info { display: flex; }
.cl__top--user-item:hover  { background: #F5F2FB; }
.cl__top--user-item:hover span { color: #904AE8; }
.cl__top--user-item:hover path { fill: #904AE8; }

.cl__header *            { margin: 0; }
.cl__header              { padding: 0 1.25rem; position: relative; z-index: 30; width: 100%; height: 90px; background-color: #FFFFFF; }
.cl__header--container   { margin: 0 auto; max-width: 1200px; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; }
.cl__header--container a { height: 100%; }
.cl__header--logo        { padding: 10px 0; display: inline-flex; justify-content: center; align-items: center; gap: 10px; height: 100%; }
.cl__header--logo img    { width: 100%; max-width: 150px; max-height: 100%; display: none; }
.cl__header--logo span   { white-space: nowrap; font-size: 24px; font-weight: 700; color: #222222; }
.cl__header--menu        { display: inline-flex; justify-content: center; align-items: center; gap: 80px; }
.cl__header--menu-item a { transition: 150ms; font-size: 18px; font-weight: 700; color: #222222; }
.cl__header--menu-item a:hover { color: #904AE8; }

.cl__header--logo img.none { width: 32px !important; height: 32px !important; }

.cl__mobileHeader                    { padding: 0 20px; position: fixed; left: 0; top: 0; z-index: 30; display: none; width: 100%; height: 80px; background-color: #F5F2FB; }
.cl__mobileHeader--container         { margin: 0 auto; max-width: 1200px; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; }
.cl__mobileHeader--cloudlearning     { width: 70px; }
.cl__mobileHeader--cloudlearning-img { max-width: 100%; }
.cl__mobileHeader--logo              { display: inline-flex; justify-content: center; align-items: center; gap: 10px; }
.cl__mobileHeader--logo img          { width: auto; max-width: 140px; height: 34px; object-fit: contain; }
.cl__mobileHeader--logo-text         { white-space: nowrap; font-size: 20px; font-weight: 700; color: #222222; }
.cl__mobileHeader--side              { display: inline-flex; justify-content: center; align-items: center; gap: 4px; }
.cl__mobileHeader--menu-btn          { cursor: pointer; }
.cl__mobileHeader--menu-btn img      { width: 18px; }
.cl__mobileHeader--menu-btn svg      { width: 18px; }
.cl__mobileHeader--menu              { padding: 0 20px 20px; position: absolute; left: 0; top: 90%; width: 100%; display: none; justify-content: flex-end; overflow: hidden; }
.cl__mobileHeader--menu.active       { display: flex; }
.cl__mobileHeader--menu-container    { padding: 20px; width: 100%; max-width: 330px; height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: 10px; background: #FFFFFF; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); border-radius: 10px; }
.cl__mobileHeader--user              { width: 100%; height: min-content; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; overflow: hidden; gap: 10px; }
.cl__mobileHeader--user-info         { width: 100%; display: grid; grid-template-columns: auto 1fr; place-items: center flex-start; gap: 6px; }
.cl__mobileHeader--profile           { position: relative; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; }
.cl__mobileHeader--profile-img       { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.cl__mobileHeader--user-text         { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 400; color: #222222; }
.cl__mobileHeader--user-item         { padding-left: 32px; width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.cl__mobileHeader--user-item img     { width: 16px; }
.cl__mobileHeader--user-item svg     { width: 16px; }
.cl__mobileHeader--user-item span    { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 400; color: #828282; }
.cl__mobileHeader--menu-list         { width: 100%; height: min-content; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 14px; overflow: hidden; }
.cl__mobileHeader--menu-item         { padding: 12px 0; width: 100%; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; gap: 10px; border-radius: 10px; }
.cl__mobileHeader--menu-item img     { width: 24px; }
.cl__mobileHeader--menu-item svg     { width: 24px; }
.cl__mobileHeader--menu-item span    { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 500; text-align: center; }
.cl__mobileHeader--menu-item:hover      { background: #F5F2FB; }
.cl__mobileHeader--menu-item:hover path { fill: #904AE8; }
.cl__mobileHeader--menu-item:hover span { color: #904AE8; }

.cl__alarm                   { position: relative; }
.cl__alarm--mobile           { cursor: pointer; }
.cl__alarm--mobile-icon      { width: 24px; }
.cl__alarm--icon             { width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; border-radius: 50%; overflow: hidden; background: #FFFFFF; border: 1px solid #DBDBDB; cursor: pointer; }
.cl__alarm--icon img         { width: 24px; }
.cl__alarm--contents         { padding: 20px; position: absolute; right: 0; top: 100%; width: 345px; display: none; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; background: #FFFFFF; border: 1px solid #DBDBDB; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); }
.cl__alarm--mobile-contents  { padding: 0 20px; position: absolute; left: 0; top: 90%; width: 100%; display: none; justify-content: flex-end }
.cl__alarm--mobile-container { padding: 20px; width: 100%; max-width: 330px; height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: 10px; background: #FFFFFF; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); border-radius: 10px; }
.cl__alarm--none             { width: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
.cl__alarm--none span        { font-size: 16px; font-weight: 400; color: #828282; }
.cl__alarm--refresh          { padding: 4px 6px; display: inline-flex; justify-content: center; align-items: center; gap: 4px; border: 1px solid #DBDBDB; border-radius: 6px; background: #FFFFFF; cursor: pointer; }
.cl__alarm--refresh img      { width: 20px; }
.cl__alarm--refresh svg      { width: 20px; }
.cl__alarm--refresh span     { font-size: 14px; font-weight: 400; color: #222222; }
.cl__alarm--list             { padding-right: 10px; position: relative; width: 100%; max-height: 700px; display: none; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; overflow-y: auto; }
.cl__alarm--item             { padding: 10px 15px; position: relative; width: 100%; display: grid; grid-template-columns: 1fr auto; grid-auto-rows: min-content; gap: 10px; background: #F6F6F6; border-radius: 10px; }
.cl__alarm--item.new         { background: #F5F2FB; }
.cl__alarm--item-info        { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; overflow: hidden; }
.cl__alarm--item-title       { font-size: 14px; font-weight: 500; color: #828282; }
.cl__alarm--item-subtitle    { width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; font-weight: 500; color: #828282; cursor: pointer; }
.cl__alarm--item-func        { height: 100%; display: inline-flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 6px; overflow: hidden; }
.cl__alarm--item-btn         { width: 20px; cursor: pointer; }
.cl__alarm--item-btn img     { max-width: 100%; }
.cl__alarm--func             { width: 100%; display: none; justify-content: flex-end; align-items: center; }
.cl__alarm--all-delete       { padding: 6px; display: inline-flex; justify-content: center; align-items: center; gap: 4px; border: 1px solid #DBDBDB; border-radius: 5px; cursor: pointer; }
.cl__alarm--all-delete img   { width: 20px; }
.cl__alarm--all-delete span  { font-size: 14px; font-weight: 400; color: #222222; }
.cl__alarm--item-new         { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; overflow: hidden; background: #FF6868; }
.cl__alarm:hover .cl__alarm--contents { display: flex; }
.cl__alarm--mobile-contents.active { display: flex; }

.cl__pagination          { margin-top: 50px; width: 100%; display: none; justify-content: center; align-items: center; column-gap: 0.625rem; }
.cl__pagination--wrapper { display: flex; justify-content: center; align-items: center; column-gap: 0.625rem; }
.cl__pagination--item    { width: 30px; height: 30px; border-radius: 0.25rem; background: transparent; display: flex; justify-content: center; align-items: center; cursor: pointer; font-family: 'Montserrat', sans-serif; font-weight: 400; color: #222222; }
.cl__pagination--item:hover           { background: #904AE8; color: #FFFFFF; }
.cl__pagination--item:hover svg path  { fill: #FFFFFF; }
.cl__pagination--item.active          { background: #904AE8; color: #FFFFFF; }
.cl__pagination--item.active svg path { fill: #FFFFFF; }

.cl__footer { padding:3.125rem; position: relative; z-index: 15; width: 100%; background: #F5F5F5; }
.cl__footer--header > img:first-child { width: 110px; }
.cl__footer--header > svg:first-child { width: 110px; }
.cl__footer--container { margin: 0 auto; max-width: 1200px; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; column-gap: 10rem; }
.cl__footer--inline  { display: inline-flex; justify-content: flex-start; align-items: center; gap: 1rem; }
.cl__footer--title { font-size: 16px; font-weight: 700; color: #828282; }
.cl__footer--contents { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1.25rem; }
.cl__footer--office { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.5rem; }
.cl__footer--office-detail { display: inline-flex; justify-content: flex-start; align-items: center; }
.cl__footer--office-detail .cl__footer--office-info { padding: 0 1rem; border-right: 1px solid #828282; }
.cl__footer--office-detail .cl__footer--office-info:first-child { padding-left: 0; }
.cl__footer--office-detail .cl__footer--office-info:last-child { border: unset; }
.cl__footer--office-info { font-size: 0.875rem; color: #828282; }
.cl__footer--office-config { white-space: pre-line; line-height: 170%; font-size: 0.875rem; color: #828282; }
.cl__footer--user { width: 100%; display: flex; justify-content: flex-start; align-items: center; column-gap: 2.5rem; row-gap: 2.5rem; }
.cl__footer--user-wrapper { display: inline-flex; justify-content: center; align-items: center; column-gap: 2.5rem; row-gap: 2.5rem; flex-wrap: wrap; }
.cl__footer--user-menu { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 0.875rem; color: #828282; }
.cl__footer--user-menu.kakaotalk:before { content: url("/public/images/icon/icon-kakaotalk.svg"); width: 24px; height: 24px; }.cl__footer--about { margin-left: 0.625rem; padding: 0.5rem 0.75rem 0.5rem 1.5rem; position: relative; display: inline-flex; justify-content: center; align-items: center; background: #FFFFFF; border-radius: 1.5rem; }
.cl__footer--about-icon { position: absolute; left: 0; top: 50%; width: 30px; transform: translate(-40%, -50%); }
.cl__footer--about-text { margin: 0; font-size: 0.875rem; font-weight: 600; color: #904AE8; white-space: pre; }
.cl__footer--logo { width: 100%; max-width: 90px; }

.cl__login                      { padding-top: 140px; padding-bottom: 120px; position: relative; z-index: 10; width: 100%; background-image: url("/public/images/common/bg-login.png"); background-size: cover; }
.cl__login--private             { position: relative; z-index: 10; width: 100%; height: calc(100vh - 120px); display: flex; justify-content: center; align-items: center; background-image: url("/public/images/common/bg-login.png"); background-size: cover; }
.cl__login--container           { margin: 0 auto; position: relative; width: 680px; height: 680px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 50%; background: #FFFFFF; }
.cl__login--container:before    { content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -50%); width: 700px; height: 700px; border-radius: 50%; border: 1px dashed #904AE84d; }
.cl__login--wrapper             { position: relative; width: 100%; max-width: 384px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2.625rem; }
.cl__login--emoji-talk          { pointer-events: none; animation: plump1 10s ease-in-out infinite; position: absolute; right: 0; top: 0; width: 130px; filter: drop-shadow(4px 6px 4px rgba(0, 0, 0, 0.1)); transform: translate(-50%, -25%); }
.cl__login--emoji-player        { pointer-events: none; animation: plump2 10s ease-in-out infinite; animation-delay: 500ms; position: absolute; left: 0; bottom: 0; width: 130px; transform: translate(45%, -10%); filter: drop-shadow(4px 6px 4px rgba(0, 0, 0, 0.1)); }
.cl__login--header              { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 1.625rem; }
.cl__login--title               { font-size: 4rem; font-weight: 700; color: var(--text1); }
.cl__login--tab                 { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; place-items: center; }
.cl__login--tab-item            { padding: 10px 0; width: 100%; border-top-left-radius: 10px; border-top-right-radius: 10px; font-size: 18px; font-weight: 400; color: #222222; text-align: center; border-bottom: 1px solid #904AE8; cursor: pointer; }
.cl__login--tab-item.active     { border: 1px solid #904AE8; border-bottom: 1px solid transparent; color: #904AE8; }
.cl__login--contents            { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.cl__login--item                { width: 100%; }
.cl__login--item.active         { border-bottom: 1px solid #904AE8; }
.cl__login--item.active
.cl__join--input-title          { color: #904AE8; }
.cl__login--item:last-child     { display: flex; justify-content: center; align-items: center; }
.cl__login--item:last-child img { max-width: 200px; }
.cl__login--capslock            { margin-top: 1.25rem; display: none; justify-content: flex-start; align-items: center; column-gap: 0.25rem; }
.cl__login--capslock img        { width: 20px; }
.cl__login--capslock svg        { width: 20px; }
.cl__login--capslock p          { font-size: 14px ;font-weight: 400; color: #FF6868; }
.cl__login--text { width: 100%; font-size: 20px; color: var(--text1); }
.cl__login--text::placeholder { font-size: 0.875rem; color: #A7A7A7; }
.cl__login--inpBox { padding-bottom: 1rem; width: 100%; display: grid; grid-template-columns: 2fr 8fr; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border1); }
.cl__login--inpBox:nth-of-type(2) { margin-top: 2rem; }
.cl__login--org { margin-top: 2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 1.5rem; }
.cl__login--label { font-size: 18px; color: #828282; }
.cl__login--check-wrapper { width: 100%; display: flex; justify-content: flex-end; align-items: center; column-gap: 1.5rem; }
.cl__login--check { display: flex; justify-content: center; align-items: center; column-gap: 0.25rem; }
.cl__login--check-input { width: 24px; height: 24px; }
.cl__login--check-label { font-size: 15px; color: #828282; white-space: pre; }
.cl__login--button { margin-top: 1rem; padding: 1rem 0; width: 100%; background: #904AE8; border-radius: 0.25rem; font-size: 18px; font-weight: 700; color: #FFFFFF; text-align: center; cursor: pointer; }
.cl__login--button.invalid { background: var(--warning-color-1); animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; -webkit-animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
.cl__login--button.disabled { background: #828282 !important; cursor: unset; }
.cl__login--footer { width: 100%; display: flex; justify-content: center; align-items: center; gap: 1rem; text-align: center; }
.cl__login--footer-side { width: 75%; display: flex; justify-content: space-between; align-items: center; column-gap: 1rem; }
.cl__login--line { pointer-events: none; }
.cl__login--menu, .cl__login--line { white-space: nowrap; font-size: 15px; color: #828282; }
.cl__login--menu:hover { color: #904AE8; }
.cl__login--menu a { font-size: 15px; color: #828282; }
.cl__login--switch { pointer-events: fill; display: flex; justify-content: flex-start; align-items: center; column-gap: 0.5rem; cursor: pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.cl__login--switch-text { font-size: 15px; color: #904AE8; }
.cl__login--switch:nth-child(2) { display: none; }
#cl__login--mail-button { background: #6125AC; }
.cl__login--menu-teacher { white-space: nowrap; font-size: 15px; color: #828282; display: none; }

.cl__join                   { padding: 150px 0; position: relative; z-index: 10; width: 100%; background-image: url("/public/images/common/bg-login.png"); }
.cl__join--container        { margin: 0 auto; padding: 70px 148px; position: relative; width: 680px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 16px; background: #FFFFFF; }
.cl__join--container:before { content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -50%); width: 700px; height: calc(100% + 20px); border-radius: 16px; border: 1px dashed #904AE84d; }
.cl__join--emoji { position: absolute; left: 100%; top: 0; pointer-events: none; animation: plump0 10s ease-in-out infinite; width: 200px; transform: translate(-35%, -50%); filter: drop-shadow(4px 6px 4px rgba(0, 0, 0, 0.1)); }
.cl__join--emoji-img { max-width: 100%; }
.cl__join--wrapper { width: 100%; max-width: 680px; display: flex; justify-content: center; align-items: center; flex-direction: column; row-gap: 90px; }
.cl__join--header { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 0.5rem; }
.cl__join--title { font-size: 64px; font-weight: 600; text-align: center; }
.cl__join--sub { font-size: 20px; font-weight: 500; text-align: center; }
.cl__join--contents { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 2rem; }
.cl__join--accept-info { width: 100%; display: none; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 2rem; }
.cl__join--inline { position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.cl__join--inline-tooltip { position: relative; display: flex; justify-content: center; align-items: center; gap: 0.5rem; }
.cl__join--cert                 { width: 100%; display: none; justify-content: space-between; align-items: center; gap: 10px; }
.cl__join--cert-text            { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl__join--cert-time            { white-space: nowrap; }
.cl__join--cert-button          { padding: 0.25rem 0.5rem; position: absolute; right: 0; top: 0; background: #904AE8; border-radius: 0.25rem; color: #FFFFFF; font-size: 15px; font-weight: 400; cursor: pointer; }
.cl__join--cert-button.disabled { background: #828282; cursor: unset; }
.cl__join--cert-desc            { font-size: 14px; font-weight: 400; color: #828282; }
.cl__join--input-wrapper { position: relative; width: 100%; display: flex; flex-direction: column; gap: 0.5rem; }
.cl__join--input { padding-bottom: 1.25rem; position: relative; width: 100%; display: grid; grid-template-columns: 3fr 7fr; place-items: center flex-start; gap: 1rem; border-bottom: 1px solid #222222; }
.cl__join--input-contents { position: relative; width: 100%; display: inline-flex; justify-content: flex-start; align-items: center; gap: 0.5rem; overflow: hidden; }
.cl__join--input-contents > .cl__login--capslock { margin-top: 0; position: absolute; right: 0; top: 50%; height: 100%; transform: translateY(-50%); background: #FFFFFF; }
.cl__join--input-title { white-space: pre; font-size: 18px; font-weight: 500; color: #222222; }
.cl__join--input-birth { width: 100%; display: grid; grid-template-columns: 1fr 0.25fr 1fr 0.25fr 1fr; gap: 0.25rem; }
.cl__join--input-birth input { width: 100%; }
.cl__join--input-sex { width: 100%; }
.cl__join--input-text { width: 100%; font-size: 18px; color: #222222; }
.cl__join--input-text::placeholder { font-size: 14px; color: #A7A7A7; }
.cl__join--input-text::-webkit-inner-spin-button { display: none !important; }
#cl__join--input-pwd { -ms-ime-mode: inactive; }
.cl__join--input.active { border-bottom: 1px solid #904AE8; }
.cl__join--input.active .cl__join--input-title { color: #904AE8; }
.cl__join--input.disabled { border-bottom: 1px solid #828282; }
.cl__join--input.disabled * { color: #828282; }
.cl__join--input-radio { display: none; }
.cl__join--input-radio:checked ~ span:before { background: #904AE8; }
.cl__join--radio-inline { display: inline-flex; justify-content: center; align-items: center; gap: 0.25rem; }
.cl__join--radio-inline > span { position: relative; display: inline-flex; justify-content: center; align-items: center; }
.cl__join--radio-inline > span:before { content: ''; position: relative; display: inline-flex; justify-content: flex-start; align-items: center; gap: 0.25rem; width: 10px; height: 10px; background-color: #E6E6E6; border: 2px solid #CCCCCC; border-radius: 50%; margin-right: .25rem; transition: .5s; }
.cl__join--radio-inline > span:after { content: ''; position: absolute; left: 1px; top: 50%; z-index: 10; width: 10px; height: 10px; transform: translateY(-50%); border: 1px solid #FFFFFF; border-radius: 50%; }
.cl__join--input-visible { cursor: pointer; }
.cl__join--input-checkbox { position: absolute; width: 0; height: 0; }
.cl__join--input-visible:hover path{ fill: #222222; }
.cl__join--input-checkbox:checked ~ .cl__join--input-visible path{ fill: #222222; }
.cl__join--description { font-size: 0.875rem; font-weight: 400; color: #828282; }
.cl__join--warning { display: none; font-size: 0.875rem; font-weight: 400; color: var(--warning-color-1); }
.cl__join--overlap { padding: 0.125rem 0.5rem; width: 32px; height: 32px; font-size: 0.875rem; color: #A7A7A7; border-radius: 0.25rem; border: 1px solid #DBDBDB; white-space: pre; background-color: #FFFFFF; }
.cl__join--license { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.75rem; }
.cl__join--license-header { display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; }
.cl__join--license-inline { display: flex; justify-content: flex-start; align-items: center; }
.cl__join--license-title { font-size: 13px; color: #828282; }
.cl__join--license-title strong { font-size: 13px; color: #904AE8; }
.cl__join--license-view { font-size: 13px; font-weight: 500; color: #828282; text-decoration: underline; cursor: pointer; }
.cl__join--license-view:hover { text-decoration: underline; }
.cl__join--license-checkbox { width: 20px; height: 20px; }
.cl__join--license-contents { padding: 0.75rem; width: 100%; height: 150px; border: 1px solid #222222; background: #FFFFFF; overflow-y: auto; }
.cl__join--license-function { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; }
.cl__join--license-function p { font-size: 15px; font-weight: 400; color: #222222; }
.cl__join--license-function input { width: 24px; height: 24px; }
.cl__join--license-info { padding: 0.5rem 0; max-width: 100%; word-break: keep-all; white-space: break-spaces; font-size: 14px !important; line-height: 1.25rem; }
.cl__join--button { margin-top: 1rem; padding: 1rem 0; width: 100%; background: #904AE8; border-radius: 0.25rem; color: #FFFFFF; font-size: 18px; font-weight: 700; cursor: pointer; }
.cl__join--button.invalid { background: var(--warning-color-1); animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; -webkit-animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
.cl__join--button.valid { background: #1876FB; }
.cl__join--button.disabled { background: #828282; cursor: unset; }

.cl__findId                     { padding: 8rem 0; position: relative; z-index: 10; width: 100%; }
.cl__findId--container          { margin: 0 auto; position: relative; width: 680px; height: 680px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 50%; background: #f5f2fb; }
.cl__findId--wrapper            { position: relative; width: 100%; max-width: 384px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
.cl__findId--emoji              { animation: plump3 10s linear infinite; position: absolute; right: 0; top: 0; pointer-events: none; filter: drop-shadow(4px 6px 4px rgba(0, 0, 0, 0.1)); transform: translateY(10%); }
.cl__findId--header             { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 1.625rem; }
.cl__findId--title              { font-size: 3rem; font-weight: 700; color: var(--text1); text-align: center; }
.cl__findId--sub                { justify-self: flex-start; font-size: 15px; color: #828282; text-align: center; }
.cl__findId--contents           { margin-top: 2rem; position: relative; width: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; row-gap: 2rem; }
.cl__findId--body               { margin-top: 2rem; position: relative; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
.cl__findId--input-contents     { position: relative; width: 100%; }
.cl__findId--input              { padding-bottom: 1rem; position: relative; width: 100%; display: grid; grid-template-columns: 3fr 7fr; place-items: center flex-start; gap: 1rem; border-bottom: 1px solid #222222; }
.cl__findId--input-text         { width: 100%; font-size: 18px; color: var(--text1); }
.cl__findId--text               { width: 100%; font-size: 18px; color: var(--text1); }
.cl__findId--button             { padding: 1rem 0; width: 100%; background: #904AE8; border-radius: 0.25rem; color: #FFFFFF; font-size: 18px; font-weight: 700; text-align: center; cursor: pointer; }
.cl__findId--done               { padding: 3.125rem 3rem; width: 100%; background-color: #f8f8f8; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.cl__findId--done-text          { font-size: 18px; color: var(--text1); text-align: center; }
.cl__findId--done-text strong   { color: #904AE8; }
.cl__findId--find               { display: none; }
.cl__findId--user-list          { width: 100%; display: none; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; }
.cl__findId--user-item          { padding: 10px; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid #DBDBDB; border-radius: 4px; }
.cl__findId--user-info          { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; }
.cl__findId--user-id            { font-size: 18px; font-weight: 500; color: #222222; }
.cl__findId--user-date          { font-size: 14px; font-weight: 400; color: #828282; }
.cl__findId--radio-wrap         { display: flex; align-content: center; align-self: flex-start; }
.cl__findId--user-radio         { display: none; }
.cl__findId--item-radio         { display: inline-flex; justify-content: flex-start; align-items: center; gap: 0.25rem; width: 16px; height: 16px; background-color: #E6E6E6; border: 3px solid #cccccc; border-radius: 50%; margin-right: .25rem; }
.cl__findId--radio-wrap > label { cursor: pointer; white-space: nowrap; }

.cl__findId--user-radio:checked ~ .cl__findId--item-radio { background-color: #904AE8; border: 3px solid #eee; }
.cl__findId--container:before  { content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -50%); width: 700px; height: 700px; border-radius: 50%; border: 2px dashed #f5f2fb; }
.cl__findId--text::placeholder { font-size: 0.875rem; color: #A7A7A7; }
.cl__findId--button.disabled   { background: #828282; color: #FFFFFF; cursor: default; }
.cl__findId--button.invalid    { background: var(--warning-color-1); animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; -webkit-animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
.cl__findId--user-item.active  { background: rgb(144 74 232 / 5%); border: 1px solid #904AE8; }
.cl__findId--input.active      { border-bottom: 1px solid #904AE8; }
.cl__findId--input.active .cl__join--input-title { color: #904AE8; }

.cl__findPass                   { padding: 8rem 0; position: relative; z-index: 10; width: 100%; }
.cl__findPass--container        { margin: 0 auto; position: relative; width: 680px; height: 680px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 50%; background: #f5f2fb; }
.cl__findPass--wrapper          { position: relative; width: 100%; max-width: 384px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.cl__findPass--svg              { position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%, -45%); display: flex; justify-content: center; align-items: center; }
.cl__findPass--svg svg          { pointer-events: none; animation: bingbing 3.5s linear infinite; transform-origin: center; }
.cl__findPass--emoji            { animation: plump3 10s linear infinite; position: absolute; right: 0; top: 0; pointer-events: none; filter: drop-shadow(4px 6px 4px rgba(0, 0, 0, 0.1)); transform: translateY(10%); }
.cl__findPass--header           { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 1.625rem; }
.cl__findPass--title            { font-size: 3rem; font-weight: 700; color: var(--text1); text-align: center; }
.cl__findPass--sub              { justify-self: flex-start; font-size: 15px; color: #828282; text-align: center; white-space: nowrap; }
.cl__findPass--body             { margin-top: 2rem; position: relative; width: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
.cl__findPass--contents         { margin-top: 2rem; width: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; row-gap: 2rem; }
.cl__findPass--id-form          { margin-top: 2rem; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
.cl__findPass--mail-form        { margin-top: 2rem; width: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
.cl__findPass--phone-form       { margin-top: 2rem; width: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
.cl__findPass--item             { width: 100%; }
.cl__findPass--inpBox-item      { margin-top: 2rem; padding-bottom: 1rem; width: 100%; display: grid; grid-template-columns: 2fr 8fr; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border1); }
.cl__findPass--input-contents   { position: relative; width: 100%; }
.cl__findPass--inpBox           { padding-bottom: 1rem; width: 100%; display: flex; justify-content: space-between; align-items: center; column-gap: 0.5rem; border-bottom: 1px solid var(--border1); }
.cl__findPass--text             { width: 100%; font-size: 18px; color: var(--text1); }
.cl__findPass--button           { padding: 1rem 0; width: 100%; background: #904AE8; border-radius: 0.25rem; color: #FFFFFF; font-size: 18px; font-weight: 700; text-align: center; cursor: pointer; }
.cl__findPass--done             { padding: 3.125rem 3rem; width: 100%; background-color: #FFFFFF; display: flex; justify-content: center; align-items: center; }
.cl__findPass--done-text        { font-size: 18px; color: var(--text1); text-align: center; }
.cl__findPass--done-text strong { color: #904AE8; }
.cl__findPass--input            { padding-bottom: 1.25rem; position: relative; width: 100%; display: grid; grid-template-columns: 3fr 7fr; place-items: center flex-start; gap: 1rem; border-bottom: 1px solid #222222; }
.cl__findPass--input-text       { width: 100%; font-size: 18px; color: var(--text1); }
.cl__findPass--warning          { width: 100%; display: none; font-size: 0.875rem; font-weight: 400; color: var(--warning-color-1); }
.cl__findPass--overlap          { padding: 0.125rem 0.5rem; color: var(--text1); border-radius: 0.25rem; border: 1px solid #DBDBDB; white-space: pre; background-color: #FFFFFF; }
.cl__findPass--input-visible    { cursor: pointer; }
.cl__findPass--checkbox         { position: absolute; width: 0; height: 0; }
.cl__findPass--cert-btn         { padding: 0.25rem 0.5rem; position: absolute; right: 0; top: 0; background: #904AE8; border-radius: 0.25rem; color: #FFFFFF; font-size: 15px; font-weight: 400; cursor: pointer; }

.cl__findPass--input.active       { border-bottom: 1px solid #904AE8; }
.cl__findPass--container:before   { content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -50%); width: 700px; height: 700px; border-radius: 50%; border: 2px dashed #f5f2fb; }
.cl__findPass--text::placeholder  { font-size: 0.875rem; font-weight: 400; color: #A7A7A7; }
.cl__findPass--button.disabled    { background: #828282; color: #FFFFFF; cursor: default; }
.cl__findPass--button.invalid     { background: var(--warning-color-1); animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; -webkit-animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
.cl__findPass--inpBox-item.active { border-bottom: 1px solid #904AE8; }
.cl__findPass--inpBox-item.active .cl__join--input-title { color: #904AE8; }
.cl__findPass--input.active .cl__join--input-title { color: #904AE8; }
.cl__findPass--input-text::placeholder { font-size: 0.875rem; color: #A7A7A7; }
.cl__findPass--input-visible:hover path{ fill: #222222; }
.cl__findPass--checkbox:checked ~ .cl__findPass--input-visible path{ fill: #222222; }

.cl__cert { position: relative; z-index: 5; width: 100%; min-height: 70vh; display: flex; justify-content: center; align-items: center; }
.cl__cert--container { position: relative; min-width: 384px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.cl__cert--svg { position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%, -45%); display: flex; justify-content: center; align-items: center; }
.cl__cert--svg svg { pointer-events: none; animation: bingbing 3.5s linear infinite; transform-origin: center; }
.cl__cert--emoji { animation: plump3 10s linear infinite; position: absolute; right: 0; top: 0; pointer-events: none; filter: drop-shadow(4px 6px 4px rgba(0, 0, 0, 0.1)); transform: translateY(10%); }
.cl__cert--item { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 2rem; text-align: center; }
.cl__cert--header { display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 1rem; text-align: center; }
.cl__cert--comment { font-size: 48px; font-weight: 700; color: var(--text1); }
.cl__cert--comment-sub { font-size: 18px; color: var(--text1); line-height: 1.75rem; }
.cl__cert--contents { font-size: 18px; color: var(--text1); }
.cl__cert--btn { margin-top: 2rem; padding: 1rem 0; width: 384px; background: #904AE8; border-radius: 0.25rem; color: #FFFFFF; font-size: 18px; font-weight: 700; text-align: center; cursor: pointer; }

.cl__auth--back { margin-top: 2rem; width: 100%; text-align: center; font-size: 15px; font-weight: 400; color: #828282; }
.cl__auth--back:hover { color: #904AE8; }

.cl__customer                    { width: 100%; background: url('/public/images/cloudlearning/customer/request-bg.png'); background-size: cover; }
.cl__customer--request           { width: 100%; overflow: hidden; }
.cl__customer--request-container { margin: 0 auto; padding: 150px 0; width: 100%; max-width: 1200px; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 50px; }
.cl__customer--request-header    { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; }
.cl__customer--request-title     { font-size: 36px; font-weight: 700; color: #222222; }
.cl__customer--request-subtitle  { font-size: 16px; font-weight: 500; color: #222222; }
.cl__customer--request-contents  { padding: 50px 80px; position: relative; width: 100%; background: rgba(255, 255, 255, 0.4); border: 1px dashed #9044EB; border-radius: 30px; }
.cl__customer--request-bg        { position: absolute; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; }
.cl__customer--request-form      { position: relative; z-index: 15; width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 60px; }
.cl__customer--request-user      { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; row-gap: 28px; }
.cl__customer--request-item      { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; row-gap: 10px; }
.cl__customer--request-column    { font-size: 18px; font-weight: 700; color: #222222; }
.cl__customer--request-input     { padding: 10px 12px; width: 100%; height: 48px; background: #FFFFFF; border-radius: 10px; border: 1px solid #D8D8D8; }
.cl__customer--request-textarea  { padding: 10px 12px; width: 100%; height: 264px; background: #FFFFFF; border-radius: 10px; border: 1px solid #D8D8D8; resize: none; }
.cl__customer--request-inquiry   { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; row-gap: 50px; }
.cl__customer--request-function  { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.cl__customer--request-security  { display: inline-flex; justify-content: flex-start; align-items: center; gap: 10px; }
.cl__customer--request-accept    { font-size: 18px; font-weight: 700; color: #828282; }
.cl__customer--request-detail    { font-size: 18px; font-weight: 700; color: #828282; text-decoration: underline; cursor: pointer; }
.cl__customer--request-btn       { padding: 10px 40px; font-size: 18px; font-weight: 700; color: #FFFFFF; background: #9044E8; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); border-radius: 50px; cursor: pointer; }
.cl__customer--request-bg img:nth-child(1) { position: absolute; right: 0; top: 0; transform: translate(10%, -65%); }
.cl__customer--request-bg img:nth-child(2) { position: absolute; left: 0; top: 0; transform: translate(50%, -50%); }
.cl__customer--request-bg img:nth-child(3) { position: absolute; right: 0; bottom: 0; transform: translate(-50%, 60%); }

.cl__customer--question             { width: 100%; overflow: hidden; background: #FFFFFF; }
.cl__customer--question-container   { margin: 0 auto; padding: 150px 0; width: 100%; max-width: 1200px; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 50px; }
.cl__customer--question-header      { width: 100%; display: flex; justify-content: center; align-items: center; gap: 12px; }
.cl__customer--question-title       { font-size: 36px; font-weight: 700; color: #222222; }
.cl__customer--question-list        { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: stretch; row-gap: 40px; }
.cl__customer--question-item        { padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; align-items: stretch; row-gap: 20px; background: #F6F6F6; border-radius: 10px; }
.cl__customer--question-inline      { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.cl__customer--question-column      { font-size: 18px; font-weight: 700; color: #222222; }
.cl__customer--question-toggle      { width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; background: #FFFFFF; border: 1px solid #DBDBDB; cursor: pointer; }
.cl__customer--question-info        { display: none; width: 100%; }
.cl__customer--question-description { width: 100%; word-break: keep-all; font-size: 18px; font-weight: 500; color: #828282; line-height: 1.875rem; }
.cl__customer--question-modal       { padding: 20px; position: fixed; left: 0; top: 0; z-index: 50; width: 100%; height: 100vh; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 20px; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1px); }
.cl__customer--question-privacy     { padding: 20px; width: 100%; max-width: 1000px; height: 60vh; background: #FFFFFF; border-radius: 10px; overflow: hidden; }
.cl__customer--question-pre         { width: 100%; height: 100%; overflow-y: auto; word-break: keep-all; white-space: break-spaces; line-height: 28px; }
.cl__customer--question-accept      { padding: 8px 12px; background: #904AE8; color: #FFFFFF; border-radius: 8px; cursor: pointer; }
.cl__customer--question-modal.active { display: flex; }
.cl__customer--question-item.active { background: #FFFFFF; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); border: 1px dashed #9044E8; }
.cl__customer--question-item.active .cl__customer--question-toggle { transform: rotate(180deg); }
.cl__customer--question-item.active .cl__customer--question-info { display: block; }

.academy__basic                 { position: relative; width: 100%; height: calc(100vh - 120px); overflow: hidden; }
.academy__basic--visual         { position: relative; width: 100%; height: 100%; background-size: cover; background-position: center; background-image: url('/public/images/common/bg-full-image.png'); }
.academy__basic--slide          { position: relative; z-index: 5; width: 100%; height: 100%; }
.academy__basic--slide-img      { position: absolute; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; }
.academy__basic--slide-img img  { width: 100%; height: 100%; object-fit: cover; }
.academy__basic--slide-info     { position: relative; z-index: 10; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 100px; background: rgba(0, 0, 0, 0.6); }
.academy__basic--slide-hero     { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; }
.academy__basic--slide-title    { font-size: 64px; font-weight: 700; color: #FFFFFF; cursor: pointer; }
.academy__basic--slide-subtitle { font-size: 32px; font-weight: 500; color: #FFFFFF; }
.academy__basic--slide-btn      { padding: 1.25rem 1.875rem; border-radius: 0.5rem; background: #FFFFFF; font-size: 24px; font-weight: 700; color: #222222; transition: 300ms ease-in-out; cursor: pointer; }
.academy__basic--remote         { position: absolute; z-index: 10; left: 50% !important; bottom: 9.25% !important; width: unset !important; display: inline-flex; justify-content: center; align-items: center; gap: 10px; transform: translateX(-50%); }
.academy__basic--remote > span  { width: 20px; height: 20px; border-radius: 10px; background: rgba(255, 255, 255, 0.5); border: 1px solid #FFFFFF; transition: 300ms; cursor: pointer; }
.academy__basic--slide-title:hover { color: #904AE8; }
.academy__basic--slide-btn:hover { background: #904AE8; color: #FFFFFF; }
.academy__basic--remote > span:hover { background: #FFFFFF; }
.academy__basic--remote > span.swiper-pagination-bullet-active { width: 40px; background: #FFFFFF; }

/*.academy__container .swiper { width: 100%; height: 396px; }*/
/*.academy__container .swiper-slide { position: relative; padding-top: 28.25%; width: 85%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border-radius: 1.875rem; overflow: hidden; }*/
/*.academy__container .swiper-slide img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1.875rem; overflow: hidden; }*/
/*.academy__container .swiper-pagination-bullet { width: 10px !important; height: 10px !important; }*/
/*.academy__container .swiper-pagination-bullet-active { background-color: #222222 !important; }*/
/*.academy__container .swiper-slide:hover .academy__visual--info { display: flex; }*/

.academy__dashboard { width: 100%; }
.academy__dashboard .swiper-wrapper { position: relative; width: 100%; height: 100%; }
.academy__dashboard--slide { position: relative; width: 100%; height: min-content; }
.academy__dashboard--slide-none { display: none; position: relative; padding-top: 28.25%; width: 100%; max-height: 480px; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; overflow: hidden; }
.academy__dashboard--slide-none img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; max-height: 480px; object-fit: cover; overflow: hidden; }
.academy__dashboard--slide-wrapper { position: relative; width: 100%; height: 100%; max-height: 480px; }
.academy__dashboard--slide-visual { position: relative; width: 100%; }
.academy__dashboard--slide-item { position: relative; padding-top: 28.25%; width: 100%; max-height: 480px; text-align: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; overflow: hidden; }
.academy__dashboard--slide-item img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; max-height: 480px; object-fit: cover; overflow: hidden; }
.academy__dashboard--slide-function { width: 100%; display: flex; justify-content: center; align-items: center; }
.academy__dashboard--slide-remote { padding: 20px 0; display: flex; justify-content: center; align-items: center; gap: 20px; }
.academy__dashboard--slide-function .swiper-pagination-bullet { transition: 300ms ease-in-out; width: 20px; height: 20px; border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, 0.5); }
.academy__dashboard--slide-function .swiper-pagination-bullet-active { width: 40px; background: #000000; }

.academy__dashboard--teacher               { padding: 50px 0; width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-auto-rows: min-content; gap: 30px; }
.academy__dashboard--teacher-header        { padding: 0 20px; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; }
.academy__dashboard--teacher-title         { font-size: 32px; font-weight: 700; color: #222222; text-align: center; }
.academy__dashboard--teacher-subtitle      { font-size: 16px; font-weight: 400; color: #222222; text-align: center; }
.academy__dashboard--teacher-contents      { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; grid-auto-rows: min-content; }
.academy__dashboard--teacher-wrapper       { padding: 80px 0; position: relative; width: 100%; }
.academy__dashboard--teacher-none          { padding: 50px 0; width: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
.academy__dashboard--teacher-none img      { width: 120px; }
.academy__dashboard--teacher-none span     { font-size: 18px; font-weight: 400; color: #222222; }
.academy__dashboard--teacher-visual        { position: relative; width: 100%; height: 334px; }
.academy__dashboard--teacher-item          { position: relative; width: 384px; height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: 0; background: #F6F6F6; border-radius: 10px; user-select: none; }
.academy__dashboard--teacher-info          { width: 100%; display: grid; grid-template-columns: 200px auto; gap: 0; }
.academy__dashboard--teacher-profile       { position: relative; width: 100%; height: 100%; }
.academy__dashboard--teacher-image         { padding-top: 128%; position: absolute; right: 0; bottom: 0; width: 100%; max-width: 200px; border: 2px solid #F6F6F6; border-radius: 20px 20px 20px 0; overflow: hidden; background: #FFFFFF; cursor: pointer; }
.academy__dashboard--teacher-image img     { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px 20px 20px 0; }
.academy__dashboard--teacher-side          { padding: 30px 20px; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 22px; overflow: hidden; }
.academy__dashboard--teacher-line          { width: 50px; height: 1px; background: #000000; }
.academy__dashboard--teacher-subject       { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 24px; font-weight: 700; color: #904AE8; }
.academy__dashboard--teacher-detail        { display: inline-flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 4px; }
.academy__dashboard--teacher-detail span   { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 36px; font-weight: 700; color: #222222; cursor: pointer; }
.academy__dashboard--teacher-detail small  { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 24px; font-weight: 500; color: #222222; }
.academy__dashboard--teacher-comment       { padding: 0 10px; width: 100%; height: 90px; display: flex; justify-content: center; align-items: center; }
.academy__dashboard--teacher-text          { width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.academy__dashboard--teacher-function      { width: 100%; display: flex; justify-content: center; align-items: center; gap: 15px; }
.academy__dashboard--teacher-function span { width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; border-radius: 50%; border: 1px solid #AAAAAA !important; background: #FFFFFF !important; overflow: hidden; opacity: 1 !important; cursor: pointer; }

.academy__dashboard--teacher-detail span:hover { color: #904AE8; }
.academy__dashboard--teacher-item.once:before { content: url('/public/images/cloudlearning/academy/dashboard/cloudlearning-dashboard-teacher-one.png'); position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -60%); }
.academy__dashboard--teacher-function span.swiper-pagination-bullet-active { border: 1px solid #904AE8 !important; background: #904AE8 !important; }

.academy__dashboard--preview               { padding: 50px 0; width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; grid-auto-rows: min-content; gap: 30px; background: #F5F2FB; }
.academy__dashboard--preview-header        { padding: 0 20px; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; }
.academy__dashboard--preview-title         { font-size: 32px; font-weight: 700; color: #222222; text-align: center; }
.academy__dashboard--preview-subtitle      { font-size: 16px; font-weight: 400; color: #222222; text-align: center; }
.academy__dashboard--preview-contents      { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; grid-auto-rows: min-content; }
.academy__dashboard--preview-wrapper       { padding: 30px 0; position: relative; width: 100%; }
.academy__dashboard--preview-none          { padding: 50px 0; width: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
.academy__dashboard--preview-none img      { width: 120px; }
.academy__dashboard--preview-none span     { font-size: 18px; font-weight: 400; color: #222222; }
.academy__dashboard--preview-visual        { position: relative; width: 100%; height: 153px; }
.academy__dashboard--preview-item          { padding: 20px; position: relative; width: 100%; max-width: 588px; height: 100%; display: grid; grid-template-columns: 200px auto; gap: 20px; overflow: hidden; background: #FFFFFF; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
.academy__dashboard--preview-thumbnail     { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 10px; cursor: pointer; }
.academy__dashboard--preview-thumbnail img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.academy__dashboard--preview-info          { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; overflow: hidden; }
.academy__dashboard--preview-detail        { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 4px; overflow: hidden; }
.academy__dashboard--preview-subject       { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 400; color: #828282; }
.academy__dashboard--preview-course        { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 400; color: #828282; }
.academy__dashboard--preview-content       { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 20px; font-weight: 400; color: #222222; cursor: pointer; }
.academy__dashboard--preview-date          { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 400; color: #828282; }
.academy__dashboard--preview-function      { width: 100%; display: flex; justify-content: center; align-items: center; gap: 15px; }
.academy__dashboard--preview-function span { width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; border-radius: 50%; border: 1px solid #AAAAAA !important; background: #FFFFFF !important; overflow: hidden; opacity: 1 !important; cursor: pointer; }

.academy__dashboard--preview-content:hover { color: #904AE8; }
.academy__dashboard--preview-function span.swiper-pagination-bullet-active { border: 1px solid #904AE8 !important; background: #904AE8 !important; }

.academy__dashboard--subject      { width: 100%; flex-wrap: wrap; display: flex; justify-content: center; align-items: center; gap: 12px; cursor: pointer; }
.academy__dashboard--subject-item { padding: 10px 30px; border-radius: 40px; background: #FFFFFF; font-size: 18px; font-weight: 400; color: #222222; cursor: pointer; }
.academy__dashboard--subject-item.active { background: #904AE8; color: #FFFFFF; }
.academy__dashboard--subject-item:hover { background: #904AE8; color: #FFFFFF; }

.academy__dashboard--one           { padding: 50px 20px; width: 100%; }
.academy__dashboard--one-container { margin: 0 auto; width: 100%; max-width: 1200px; display: flex; }
.academy__dashboard--one-image     { margin: 0 auto; max-width: 100%; object-fit: contain; }
.academy__dashboard--one-none      { padding: 50px 0; width: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
.academy__dashboard--one-none img  { width: 120px; }
.academy__dashboard--one-none span { font-size: 18px; font-weight: 400; color: #222222; }

.academy__dashboard--board           { padding: 50px 20px; width: 100%; background: #F2F4FF; }
.academy__dashboard--board-container { margin: 0 auto; width: 100%; max-width: 1200px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 100px; }
.academy__dashboard--board-item      { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 20px; overflow: hidden; }
.academy__dashboard--board-header    { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.academy__dashboard--board-name      { white-space: nowrap; font-size: 32px; font-weight: 700; color: #222222; }
.academy__dashboard--board-more      { font-size: 16px; font-weight: 400; color: #828282; text-decoration: underline; cursor: pointer; }
.academy__dashboard--board-contents  { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 10px; overflow: hidden; }
.academy__dashboard--board-post      { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 10px; overflow: hidden; }
.academy__dashboard--board-info      { width: 100%; display: inline-flex; justify-content: flex-start; align-items: center; gap: 10px; overflow: hidden; }
.academy__dashboard--board-title     { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 400; color: #222222; cursor: pointer; }
.academy__dashboard--board-count     { font-size: 16px; font-weight: 400; color: #828282; text-align: center; width: auto; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.academy__dashboard--board-new       { padding: 4px 10px; background: #FF6868; border-radius: 10px; font-size: 12px; font-weight: 700; color: #FFFFFF; }
.academy__dashboard--board-date      { font-size: 16px; font-weight: 400; color: #828282; }
.academy__dashboard--board-none      { padding: 50px 0; width: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
.academy__dashboard--board-none img  { width: 60px; }
.academy__dashboard--board-none span { font-size: 18px; font-weight: 400; color: #222222; }
.academy__dashboard--board-title:hover { text-decoration: underline; }

.course__view * { margin: 0; padding: 0; }
.course__view { width: 100%; }
.course__view--container { padding: 5rem 0; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 5rem; }
.course__view--course { margin: 0 auto; max-width: 1200px; width: 100%; display: grid; grid-template-columns: 3fr 1fr; gap: 2rem; }
.course__view--contents { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: 2rem; overflow: hidden; }
.course__view--box { padding: 1rem 1.25rem; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1.5rem; border: 1px solid #98A5FF; box-shadow: 0 4px 4px rgb(0 0 0 / 10%); }
.course__view--box > * { width: 100%; }
.course__view--box > h5 { padding-bottom: 0.6125rem; text-align: center; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.course__view--sign { padding: 10px; width: 100%; display: grid; grid-template-columns: 320px auto; grid-auto-rows: min-content; gap: 30px; overflow: hidden; background-image: url("/public/images/common/bg-course-info.png"); background-size: cover; }
.course__view--thumbnail { padding-top: 56%; position: relative; width: 100%; border: 3px solid #FFFFFF; background: #FFFFFF; box-shadow: 0 0 15px rgba(0, 0, 0, 0.17); overflow: hidden; }
.course__view--thumbnail > img { position: absolute; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; object-fit: cover; }
.course__view--thumbnail-lock { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 15; }
.course__view--card { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 1.5rem; }
.course__view--card-header { width: 100%; }
.course__view--card-title { font-size: 24px; font-weight: 500; color: #222222; }
.course__view--card-contents { width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.5rem; }
.course__view--card-item { padding: 0.5rem 0.75rem; display: inline-flex; justify-content: center; align-items: center; gap: 0.25rem; border: 1px solid #E5E5E5; border-radius: 0.5rem; background: #FFFFFF; cursor: pointer; }
.course__view--card-item img { height: 24px; }
.course__view--card-item svg { height: 24px; }
.course__view--card-item span { white-space: nowrap; }
.course__view--card-item:hover { border: 1px solid #904AE8; background: #904AE8; }
.course__view--card-item:hover * { color: #FFFFFF; fill: #FFFFFF; }
.course__view--card-item.active { border: 1px solid #904AE8; background: #904AE8; }
.course__view--card-item.active * { color: #FFFFFF; fill: #FFFFFF; }
.course__view--user-status.disabled { background: #F6F6F6 !important; cursor: default; }
.course__view--user-status.disabled img { filter: brightness(550%) !important; }
.course__view--user-status.disabled { border: 1px solid #F6F6F6 !important; }
.course__view--user-status.disabled path { fill: #999999 !important; }
.course__view--user-status.disabled span { color: #999999 !important; }
.course__view--attach { width: 100%; height: 100%; display: inline-flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 0.25rem; }
.course__view--attach-item { padding: 0.5rem 0.75rem; display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; white-space: nowrap; font-size: 14px; font-weight: 400; border: 1px solid #E5E5E5; border-radius: 0.5rem; background: #FFFFFF; cursor: pointer; }
.course__view--attach-item::before { content: '📝'; }
.course__view--detail-teacher { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; overflow: hidden; }
.course__view--detail-teacher span { cursor: pointer; }
.course__view--detail-teacher span:hover { color: #687CFF; }
.course__view--description { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.course__view--description-header { padding: 0 0.5rem; width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem;}
.course__view--description-contents { padding: 10px !important; position: relative; width: 100%; display: flex; }
.course__view--description-contents.over { max-height: 150px; overflow: hidden; }
.course__view--description-contents.over:after { content: ''; position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%; height: 100%; background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%); }
.course__view--description-title { font-size: 16px; font-weight: 700; }
.course__view--button.outline { padding: 6px; display: flex; justify-content: center; align-items: center; gap: 3px; border: 1px solid #E5E5E5; background: #FFFFFF; border-radius: 0.25rem; cursor: pointer; }
.course__view--button.outline * { font-size: 14px; font-weight: 400; }
.course__view--button.outline img { width: 20px; height: 20px; }
.course__view--button.outline svg { width: 20px; height: 20px; }
.course__view--detail { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1.25rem; }
.course__view--detail-item { padding: 0 0.5rem; width: 100%; display: grid; grid-template-columns: 1fr 2fr; gap: 0.5rem; }
.course__view--detail-count { padding: 0.5rem 0; display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; background: #f8f9fa; }
.course__view--detail-count span { display: inline-flex; justify-content: center; align-items: center; gap: 0.25rem; }
.course__view--detail-count span * { font-size: 14px; font-weight: 300; color: #828282; }
.course__view--detail-count span img { width: 14px; height: 14px; }
.course__view--detail-count span:first-child *:first-child { color: #FF5757; }
.course__view--detail-count span:last-child *:first-child { color: #dadada; }
.course__view--tab { width: min-content; display: inline-flex; justify-content: center; align-items: center; gap: 10px; }
.course__view--tab-item { padding: 8px; border: 1px solid rgba(0, 0, 0, 0); border-radius: 4px; white-space: nowrap; font-size: 14px; font-weight: bold; color: #222222; cursor: pointer; user-select: none; }
.course__view--tab-item:hover { border: 1px solid #904AE8; color: #904AE8; }
.course__view--tab-item.active { background: #904AE8; border: 1px solid #904AE8; color: #FFFFFF; }
.course__view--video { margin: 0 auto; max-width: 1200px; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 2rem; }
.course__view--video-header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; }
.course__view--video-title { font-size: 1.25rem; font-weight: 500; color: #222222; }
.course__view--video-function { display: flex; justify-content: center; align-items: center; gap: 10px; }
.course__view--video-type { padding: 0.25rem 0.5rem; display: none; justify-content: center; align-items: center; gap: 0.5rem; border: 1px solid #E5E5E5; background: #FFFFFF; border-radius: 0.25rem; cursor: pointer; }
.course__view--video-type * { font-size: 14px; font-weight: 400; }
.course__view--video-type img { width: 14px; height: 14px; }
.course__view--video-type svg { width: 14px; height: 14px; }
.course__view--video-type:hover { border: 1px solid #904AE8; background: #904AE8; color: #FFFFFF !important; }
.course__view--video-type:hover * { color: #FFFFFF !important; }
.course__view--video-type:hover path { fill: #FFFFFF !important; }
.course__view--video-sort { padding: 0.25rem 0.5rem; display: flex; justify-content: center; align-items: center; gap: 0.5rem; border: 1px solid #E5E5E5; background: #FFFFFF; border-radius: 0.25rem; cursor: pointer; }
.course__view--video-sort:before { content: url("/public/images/icon/align-asc-icon.svg"); }
.course__view--video-sort.desc:before { content: url("/public/images/icon/align-desc-icon.svg"); }
.course__view--video-sort * { font-size: 14px; font-weight: 400; }
.course__view--video-sort:hover { border: 1px solid #904AE8; background: #904AE8; color: #FFFFFF !important; }
.course__view--video-sort:hover * { color: #FFFFFF !important; }
.course__view--video-sort:hover path {  }
.course__view--list { width: 100%; display: none; }
.course__view--list-header { padding: 0.75rem; width: 100%; display: grid; grid-template-columns: 1fr 5fr 1.5fr 1fr 1fr 0.5fr; gap: 0.5rem; place-items: center; border-top: 1px solid #E5E5E5; border-bottom: 2px solid #E5E5E5; }
.course__view--list-column { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; white-space: nowrap; font-size: 16px; font-weight: 700; color: #222222; }
.course__view--list-contents { width: 100%; }
.course__view--list-item { padding: 0.75rem; width: 100%; display: grid; grid-template-columns: 1fr 5fr 1.5fr 1fr 1fr 0.5fr; gap: 0.5rem; border-bottom: 1px solid #E5E5E5; }
.course__view--list-item.meeting .course__view--list-link:before { content: url("/public/images/icon/meeting.svg"); filter: grayscale(1); margin-right: 4px; width: 16px; height: 16px; display: inline-block; transform: translateY(10%); user-select: none; cursor: default; }
.course__view--list-item.meeting.open .course__view--list-link:before { filter: unset; }
.course__view--list-text { display: flex; justify-content: center; align-items: center; }
.course__view--list-text:nth-child(2) { justify-content: flex-start; }
.course__view--list-link { display: flex; justify-content: flex-start; align-items: center; cursor: pointer; }
.course__view--list-link:hover * { color: #904AE8; }
.course__view--list-share { padding: 0.25rem; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 400; color: #222222; border: 1px solid #E5E5E5; border-radius: 0.25rem; white-space: nowrap; cursor: pointer; }
.course__view--gallery { width: 100%; display: none; }
.course__view--none { margin-top: 1.25rem; position: relative; z-index: 10; width: 100%; height: 150px; background: #FFFFFF; display: none; flex-direction: column; justify-content: center; align-items: center; row-gap: 0.25rem; border-radius: 0.625rem; }
.course__view--none p { font-size: 18px; font-weight: 400; color: #222222; }

.contents__edit, .contents__edit * { margin: 0; padding: 0; }
.contents__edit { width: 100%; }
.contents__edit--container { margin: 0 auto; padding: 5rem 0; max-width: 1200px; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 2rem; }
.contents__edit--header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.contents__edit--title { font-size: 20px; font-weight: 600; color: #222222; }
.contents__edit--header-side { display: inline-flex; justify-content: center; align-items: center; gap: 1rem; }
.contents__edit--append-btn { padding: 0.25rem 0.75rem; display: inline-flex; justify-content: center; align-items: center; gap: 0.25rem; background: #904AE8; border-radius: 0.25rem; cursor: pointer; }
.contents__edit--append-btn img, .contents__edit--append-btn svg { width: 16px; }
.contents__edit--append-btn path { fill: #FFFFFF; }
.contents__edit--append-btn span { color: #FFFFFF; }
.contents__edit--contents { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0; }
.contents__edit--column { padding: 1rem 0; width: 100%; display: grid; grid-template-columns: 1fr 1.5fr 3fr 2fr 2.5fr; gap: 0.5rem; place-items: center; background: #FCFCFC; border-top: 1px solid #DEE2E6; border-bottom: 3px solid #DEE2E6; }
.contents__edit--list { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0; }
.contents__edit--item { padding: 1rem 0; width: 100%; display: grid; grid-template-columns: 1fr 1.5fr 3fr 2fr 2.5fr; gap: 0.5rem; place-items: center; border-bottom: 1px solid #DBDBDB; }
.contents__edit--item-slot { display: inline-flex; justify-content: center; align-items: center; gap: 0.25rem; }
.contents__edit--item-slot > * { width: 30px; height: 30px; display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; border: 1px solid #E5E5E5; background: #FFFFFF; border-radius: 0.25rem; cursor: pointer; }
.contents__edit--item-slot img, .contents__edit--item-slot svg { width: 12px; }
.contents__edit--item-down { transform: rotate(180deg); }
.contents__edit--item-thumbnail { position: relative; width: 100px; height: 60px; border: 2px solid #FFFFFF; box-shadow: 0 0 5px rgb(0 0 0 / 10%); cursor: pointer; }
.contents__edit--item-thumbnail img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.contents__edit--item-file { display: none; width: 0; height: 0; }
.contents__edit--item-title { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 0.25rem; }
.contents__edit--item-title input { padding: 0.25rem 0.5rem; width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; border: 1px solid #E5E5E5; background: #FFFFFF; border-radius: 0.25rem; }
.contents__edit--item-title div { padding: 0.25rem 0.5rem; white-space: nowrap; display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; border: 1px solid #E5E5E5; background: #FFFFFF; border-radius: 0.25rem; cursor: pointer; }
.contents__edit--item-function { display: inline-flex; justify-content: center; align-items: center; gap: 0.25rem; }
.contents__edit--item-function > div { padding: 0.25rem 0.5rem; white-space: nowrap; display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; border: 1px solid #E5E5E5; background: #FFFFFF; border-radius: 0.25rem; cursor: pointer; }

.qna , .qna * { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; list-style: none; outline: none; border: none; color: var(--text1); font-size: 16px; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; -webkit-font-smoothing: antialiased; background-color: transparent; transform: none; perspective: none; }
.qna { width: 100%; background: #F5F2FB; }
.qna__container { margin: 0 auto; padding: 5rem 0; max-width: 1200px; width: 100%; min-height: 70vh; }
.qna__side { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: 2.5fr 1fr; column-gap: 1.5rem; }
.qna__wrapper { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 2rem; }
.qna__header { padding-bottom: 2.5rem; position: relative; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.qna__hero { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.625rem }
.qna__hero--title { font-size: 36px; font-weight: 700; color: #222222; }
.qna__hero--sub { font-size: 18px; }
.qna__hero--img { position: absolute; top: 100%; right: 0; z-index: 1; transform: translate(5%, -55%); }
.qna__list--course { margin-top: 1.25rem; position: relative; width: 65%; }
.qna__list--course-select { padding: 0.625rem 1.25rem; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 0.25rem; background: #F6F6F6; border: 1px solid #DBDBDB; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.qna__list--course svg { position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; }
.qna__subject { padding-top: 2.5rem; position: relative; z-index: 5; display: flex; justify-content: flex-start; align-items: center; column-gap: 0.625rem; }
.qna__student--filter { margin-top: 1.25rem; width: 100%; display: flex; justify-content: flex-start; align-items: center; column-gap: 0.625rem; }
.qna__student--course { position: relative; width: 40%; }
.qna__student--course-select { padding: 0.625rem 1.25rem; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 0.25rem; background: #F6F6F6; border: 1px solid #DBDBDB; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.qna__student--course svg { position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; }
.qna__filter--my { padding: 0.5rem 1.875rem; display: inline-flex; justify-content: center; align-items: center; column-gap: 0.5rem; border-radius: 2.5rem; font-size: 18px; cursor: pointer; background: #FFFFFF; font-weight: 600; font-family: 'Montserrat', 'Pretendard', 'Noto Sans KR', sans-serif; }
.qna__filter--my.active { background: #904AE8; font-weight: 700; color: #FFFFFF; }
.qna__filter--my.active p { background: #904AE8; font-weight: 700; color: #FFFFFF; }
.qna__filter--my:hover { background: #904AE8; font-weight: 700; color: #FFFFFF; }
.qna__user--img { position: absolute; right: 0; top: 100%; z-index: 1; transform: translate(5%, -55%); }
.qna__item--question-title { display: inline-flex; justify-content: flex-start; align-items: center; column-gap: 0.5rem; }
.qna__item--question-info { display: inline-flex; justify-content: flex-start; align-items: center; column-gap: 1rem; }
.qna__write--btn { padding: 0.5rem 1.25rem; border-radius: 2.5rem; display: flex; justify-content: center; align-items: center; column-gap: 0.25rem; background: #FF6868; justify-self: flex-end; }
.qna__write--btn p { font-size: 18px; font-weight: 700; color: #FFFFFF; white-space: nowrap; }
.qna__write--btn svg path { fill: #FF6868; }
.qna__write--btn svg circle { fill: #FFFFFF; }
.qna__none { margin-top: 1.25rem; position: relative; z-index: 10; width: 100%; height: 350px; background: #FFFFFF; display: none; flex-direction: column; justify-content: center; align-items: center; row-gap: 0.25rem; border-radius: 0.625rem; }
.qna__none p { font-size: 18px; font-weight: 400; color: #222222; }
.qna__contents { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; row-gap: 3.125rem; }
.qna__contents--pagination { margin-top: 50px; width: 100%; display: flex; justify-content: center; align-items: center; column-gap: 0.625rem; }
.qna__contents--pagination-item { width: 30px; height: 30px; border-radius: 0.25rem; background: transparent; display: flex; justify-content: center; align-items: center; cursor: pointer; font-family: 'Montserrat', sans-serif; font-weight: 400; color: #222222; }
.qna__contents--pagination-item:hover { background: #904AE8; color: #FFFFFF; }
.qna__contents--pagination-item:hover svg path { fill: #FFFFFF; }
.qna__contents--pagination-item.active { background: #904AE8; color: #FFFFFF; }
.qna__contents--pagination-item.active svg path { fill: #FFFFFF; }

.qna__item { padding: 2.25rem 1.875rem; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 2rem; border-radius: 0.625rem; background: #FFFFFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); overflow: hidden; }
.qna__item--header { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; }
.qna__item--header-side:first-child { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1rem; }
.qna__item--header-side:last-child { display: flex; justify-content: flex-end; align-items: center; column-gap: 0.5rem; }
.qna__item--header-side:last-child .qna__item--header-function { display: flex; justify-content: flex-end; align-items: center; column-gap: 0.5rem; }
.qna__item--header-side.read { height: 100%; flex-direction: column; justify-content: flex-start; align-items: flex-end; row-gap: 1rem; }
.qna__item--info { display: inline-flex; justify-content: flex-end; align-items: center; column-gap: 1rem; }
.qna__item--course-wrapper { width: 100%; display: flex; justify-content: flex-start; align-items: center; column-gap: 0.625rem; overflow: hidden; }
.qna__item--course-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; color: #828282; cursor: pointer; }
.qna__item--course-title:hover { color: #904AE8; }
.qna__item--lecture-title:before { content: ' · '; }
.qna__item--lecture-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; color: #828282; cursor: pointer; }
.qna__item--lecture-title:hover { color: #904AE8; }
.qna__item--question { display: flex; justify-content: flex-start; align-items: center; column-gap: 0.5rem; }
.qna__item--question-text { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; font-weight: 500; color: #222222; cursor: pointer; display: flex; justify-content: flex-start; align-items: center; column-gap: 0.5rem; }
.qna__item--question-text:hover { color: #904AE8; }
.qna__item--date { display: inline-flex; justify-content: center; align-items: center; column-gap: 0.25rem; }
.qna__item--date img { width: 13px; }
.qna__item--date svg { width: 13px; }
.qna__item--date p { font-size: 0.875rem; font-weight: 400; color: #828282; white-space: pre; }
.qna__item--writer { display: inline-flex; justify-content: center; align-items: center; column-gap: 0.25rem; }
.qna__item--writer img { width: 13px; }
.qna__item--writer svg { width: 13px; }
.qna__item--writer p { font-size: 0.875rem; font-weight: 400; color: #828282; white-space: pre; }
.qna__item--writer-teacher { cursor: pointer; }
.qna__item--writer-teacher:hover { color: #904AE8; }
.qna__item--open { display: inline-flex; justify-content: center; align-items: center; column-gap: 0.25rem; }
.qna__item--open img { width: 13px; }
.qna__item--open svg { width: 13px; }
.qna__item--open p { font-size: 0.875rem; font-weight: 400; color: #828282; white-space: pre; }
.qna__item--my { display: inline-flex; justify-content: center; align-items: center; column-gap: 0.25rem; }
.qna__item--my img { width: 60px; }
.qna__item--my svg { width: 60px; }
.qna__item--status { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; }
.qna__item--status-teacher { white-space: pre; font-size: 18px; font-weight: 500; }
.qna__item--status-date { font-size: 0.875rem; color: #828282; }
.qna__item--contents { padding-top: 1.5rem; width: 100%; border-top: 1px dashed #CCCCCC; }
.qna__item--contents-text { font-size: 16px; font-weight: 400; color: #222222; line-height: 2.25rem }
.qna__item--footer { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; column-gap: 0.625rem; }
.qna__item--footer-item { padding: 0.5rem 0.75rem; display: none; justify-content: center; align-items: center; column-gap: 0.375rem; border: 1px solid #DBDBDB; border-radius: 0.25rem; cursor: pointer; transition: all 100ms ease-out; }
.qna__item--footer-item b { white-space: pre; }
.qna__item--footer-item.eval { background: #904AE8; }
.qna__item--footer-item.eval b { color: #FFFFFF; }
.qna__item--footer-item.eval path { fill: #FFFFFF; }
.qna__item--confirm-no { white-space: pre; font-size: 18px; color: #828282; }
.qna__item--attachImg { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 1rem; }
.qna__item--attachImg-item { padding-top: 100%; position: relative; width: 100%; background-color: #F5F2FB; box-shadow: 0 0 10px rgba(0, 0, 0, 0.13); cursor: pointer; }
.qna__item--attachImg-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.qna__item--attachFile { width: 100%; display: inline-flex; justify-content: flex-start; align-items: center; column-gap: 1rem; row-gap: 1rem; flex-wrap: wrap; }
.qna__item--attachFile-item { padding: 0.5rem 0.75rem; max-width: 200px; display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; border: 1px solid #E5E5E5; border-radius: 0.5rem; font-size: 14px; font-weight: 400; cursor: pointer; }
.qna__item--attachFile-item::before { content: '📝'; }
.qna__item--attachFile-item p { width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.qna__item--attachFile-cancel { padding: 0.25rem; position: absolute; right: 0; top: 0; z-index: 10; transform: translate(50%, -50%); display: flex; justify-content: center; align-items: center; font-size: 10px; background: #FFFFFF; border-radius: 50%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); cursor: pointer; }
.qna__item--attachImg-more { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1px); }
.qna__item--attachImg-more p { font-size: 18px; font-weight: 700; color: #FFFFFF;  }
.qna__item--status-wrapper { padding: 1.25rem 0; position: absolute; right: 0; bottom: 100%; display: inline-flex; justify-content: center; align-items: center; column-gap: 0.5rem; }
.qna__item--btn { padding: 0.25rem 0.5rem; display: inline-flex; justify-content: center; align-items: center; column-gap: 0.25rem; border: 1px solid #DBDBDB; border-radius: 0.25rem; cursor: pointer; }
.qna__item--btn p { font-size: 16px; color: #222222; white-space: pre; }
.qna__item--title:hover { color: #687CFF; cursor: pointer; }

.qna__comment--wrapper , .qna__comment--wrapper * { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; list-style: none; outline: none; border: none; color: var(--text1); font-size: 16px; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; -webkit-font-smoothing: antialiased; background-color: transparent; transform: none; perspective: none; }
.qna__comment { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 2rem; }
.qna__comment--header { padding: 1.25rem; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1.5rem; border-radius: 0.625rem; background: #FFFFFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); width: 100%; }
.qna__comment--number { font-size: 18px; color: #222222; }
.qna__comment--number > strong { color: #904AE8; }
.qna__comment--box { padding: 1.25rem; width: 100%; display: flex; justify-content: space-between; align-items: center; background-color: #FFFFFF; border-radius: 0.625rem; border: 1px solid #DBDBDB; column-gap: 2rem; }
.qna__comment--input { width: 100%; height: 149px; resize: none; }
.qna__comment--input::-webkit-scrollbar { width: 4px; }
.qna__comment--input::-webkit-scrollbar-thumb { background: #904AE8; border-radius: 0.5rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.qna__comment--input::-webkit-scrollbar-track { background: #CCCCCC; border-radius: 0.5rem; }
.qna__comment--side { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.qna__comment--info { font-size: 0.875rem; font-weight: 400; color: #BBBBBB; }
.qna__comment--btn { padding: 0.5rem 0.75rem; display: flex; justify-content: center; align-items: center; column-gap: 0.375rem; border: 1px solid #DBDBDB; border-radius: 0.25rem; cursor: pointer; }
.qna__comment--btn-text { font-size: 16px; color: #222222; white-space: pre; }
.qna__comment--contents { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; row-gap: 1.75rem; }
.qna__comment--item { padding: 1.25rem; position: relative; display: inline-flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1.5rem; border-radius: 0.625rem; background: #FFFFFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); width: 100%; }
.qna__comment--item.reply { width: 90%; }
.qna__comment--item-side:first-child { display: flex; justify-content: flex-start; align-items: center; column-gap: 0.5rem; }
.qna__comment--item-side:nth-child(2) { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.375rem; line-height: 1.625rem; }
.qna__comment--item-more { position: absolute; left: 100%; bottom: 0; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; border: 1px solid #DBDBDB; background: #FFFFFF; transform: translateY(-100%); cursor: pointer; }
.qna__comment--item-more img { width: 12px; }
.qna__comment--item-more svg { width: 12px; }
.qna__comment--item-content { width: 100%; font-size: 16px; font-weight: 400; color: #828282; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.qna__comment--item-footer { width: 100%; display: flex; justify-content: flex-start; align-items: center; column-gap: 1rem; }
.qna__comment--item-date { font-size: 14px ;font-weight: 400; color: #bbbbbb; }
.qna__comment--item-reply { display: inline-flex; justify-content: center; align-items: center; column-gap: 0.25rem; cursor: pointer; }
.qna__comment--item-delete { display: flex; justify-content: center; align-items: center; column-gap: 0.25rem; cursor: pointer; }
.qna__comment--item-delete p { color: #222222; }
.qna__comment--writer { position: relative; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background-color: #222222; }
.qna__comment--writer-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.qna__comment--writer-name { font-size: 16px; }
.qna__comment--writer.skeleton { background-color: #e2e5e7; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-size: 40px 100%; background-repeat: no-repeat; background-position: left -40px top 0; animation: shine 1s ease infinite; }
.qna__comment--writer-name.skeleton { width: 100px; height: 20px; border-radius: 0.25rem; background-color: #e2e5e7; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-size: 40px 100%; background-repeat: no-repeat; background-position: left -40px top 0; animation: shine 1s ease infinite; }
.qna__comment--item-content.skeleton { width: 200px; height: 20px; border-radius: 0.25rem; background-color: #e2e5e7; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-size: 40px 100%; background-repeat: no-repeat; background-position: left -40px top 0; animation: shine 1s ease infinite; }
.qna__comment--item-date.skeleton { margin-top: 0.75rem; width: 100px; height: 20px; border-radius: 0.25rem; background-color: #e2e5e7; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-size: 40px 100%; background-repeat: no-repeat; background-position: left -40px top 0; animation: shine 1s ease infinite; }

.qna__reply { padding: 0.625rem; width: 100%; height: 130px; border-radius: 0.625rem; border: 1px solid #DBDBDB; display: flex; justify-content: flex-start; align-items: flex-start; row-gap: 0.625rem; }
.qna__reply--area { width: 100%; height: 60px; resize: none; }
.qna__reply--area::-webkit-scrollbar { width: 4px; }
.qna__reply--area::-webkit-scrollbar-thumb { background: #904AE8; border-radius: 0.5rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.qna__reply--area::-webkit-scrollbar-track { background: #CCCCCC; border-radius: 0.5rem; }
.qna__reply--done { justify-self: flex-end; align-self: flex-end; border-radius: 0.25rem; background: transparent; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.qna__reply--done:hover { background: #904AE8;  }
.qna__reply--done:hover svg path { fill: #FFFFFF; }

.answer__view--functions { width: 100%; display: flex; justify-content: flex-end; align-items: center; column-gap: 0.5rem; }
.answer__view--update, .answer__view--update * { margin: 0; padding: 0; border: none; outline: none; background: transparent; }
.answer__view--update { position: fixed; left: 0; top: 0; z-index: 100; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1px); }
.answer__view--update-container { margin-top: 1.875rem; padding: 2.25rem 1.875rem; max-width: 730px; width: 100%; background: #FFFFFF; border-radius: 0.625rem; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); gap: 1rem; }
.answer__view { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1.5rem; }
.answer__view--item { padding: 2.25rem 1.875rem; background: #FFFFFF; border-radius: 0.625rem; position: relative; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1.25rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
.answer__view--item-header { width: 100%; display: flex; justify-content: flex-start; align-items: center; column-gap: 0.625rem; }
.answer__view--writer { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.answer__view--writer-name { display: inline-flex; justify-content: center; align-items: center; gap: 4px; font-size: 18px; font-weight: 400; color: #222222; }
.answer__view--writer-date { font-size: 0.875rem; font-weight: 400; color: #222222; }
.answer__view--item-contents { padding-left: 2rem; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1.25rem; }
.answer__view--item-text { font-size: 16px; font-weight: 400; color: #222222; line-height: 2.25rem; }
.answer__view--img-wrapper::-webkit-scrollbar { height: 6px; }
.answer__view--img-wrapper::-webkit-scrollbar-thumb { background: #904AE8; border-radius: 0.5rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.answer__view--img-wrapper::-webkit-scrollbar-track { background: #CCCCCC; border-radius: 0.5rem; }
.answer__view--img-wrapper { width: 100%; overflow-x: auto; }
.answer__view--img-list { display: inline-flex; justify-content: flex-start; align-items: center; column-gap: 1rem; flex-wrap: nowrap; }
.answer__view--img-item { position: relative; width: 360px; height: 230px; }
.answer__view--img-item img { width: 100%; height: 100%; object-fit: cover; -o-object-fit: cover; }
.answer__view--done { padding: 0.75rem 1rem; display: flex; justify-content: center; align-items: center; column-gap: 0.5rem; border-radius: 1.875rem; background: #904AE8; cursor: pointer; }
.answer__view--done p { font-size: 16px; font-weight: 400; color: #FFFFFF; }
.answer__view--btn { padding: 0.25rem 0.5rem; display: inline-flex; justify-content: center; align-items: center; column-gap: 0.25rem; border: 1px solid #DBDBDB; border-radius: 0.25rem; cursor: pointer; }
.answer__view--btn p { font-size: 16px; color: #222222; white-space: pre; }
.answer__view--update-btn { padding: 0.25rem 0.5rem; display: inline-flex; justify-content: center; align-items: center; column-gap: 0.25rem; border: 1px solid #DBDBDB; border-radius: 0.25rem; cursor: pointer; }
.answer__view--update-btn p { font-size: 16px; color: #222222; white-space: pre; }

.answer__write { padding: 2rem 1.875rem; background: #FFFFFF; border-radius: 0.625rem; width: 100%; display: none; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1.5rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
.answer__write--header { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.answer__write--side { display: flex; justify-content: flex-start; align-items: center; column-gap: 0.5rem; }
.answer__write--cancel { cursor: pointer; }
.answer__write--title { font-size: 18px; font-weight: 400; color: #222222; }
.answer__write--btn { padding: 0.5rem 0.75rem; display: flex; justify-content: center; align-items: center; column-gap: 0.375rem; border: 1px solid #DBDBDB; border-radius: 0.25rem; cursor: pointer; background: #904AE8; }
.answer__write--btn p { font-size: 16px; font-weight: 400; color: #FFFFFF; }
.answer__write--contents { width: 100%; border-radius: 0.25rem; border: 1px solid #DBDBDB; }
.answer__write--function { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.answer__write--file-wrapper { display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; }
.answer__write--file { padding: 0.5rem 0.5rem; display: flex; justify-content: center; align-items: center; column-gap: 0.25rem; border: 1px solid #DBDBDB; border-radius: 0.25rem; background: #FFFFFF; cursor: pointer; }
.answer__write--file img, .answer__write--file svg { height: 20px; }
.answer__write--file input { display: none; }
.answer__write--file span { font-size: 0.875rem; font-weight: 400; color: #222222; }
.answer__write--file-update { padding: 0.5rem 0.5rem; display: flex; justify-content: center; align-items: center; column-gap: 0.25rem; border: 1px solid #DBDBDB; border-radius: 0.25rem; background: #FFFFFF; cursor: pointer; }
.answer__write--file-update input { display: none; }
.answer__write--file-update p { font-size: 0.875rem; font-weight: 400; color: #222222; }
.answer__write--attachImg { padding: 1rem 0; width: 100%; background: #FFFFFF; border-radius: 0.625rem; display: none; }
.answer__write--attachImg-wrapper::-webkit-scrollbar { height: 6px; }
.answer__write--attachImg-wrapper::-webkit-scrollbar-thumb { background: #904AE8; border-radius: 0.5rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.answer__write--attachImg-wrapper::-webkit-scrollbar-track { background: #CCCCCC; border-radius: 0.5rem; }
.answer__write--attachImg-wrapper { padding: 0.5rem 0; width: 100%; overflow-x: auto; }
.answer__write--attachImg-list { display: inline-flex; justify-content: flex-start; align-items: center; column-gap: 1rem; flex-wrap: nowrap; }
.answer__write--attachImg-item { position: relative; width: 150px; height: 100px; }
.answer__write--attachImg-picture { width: 100%; height: 100%; overflow: hidden; border-radius: 0.5rem; box-shadow: 0 0 14px rgba(0, 0, 0, 0.1); }
.answer__write--attachImg-picture img { width: 100%; height: 100%; object-fit: cover; -o-object-fit: cover; }
.answer__write--attachImg-cancel { padding: 0.25rem; position: absolute; right: 0; top: 0; z-index: 10; transform: translate(50%, -50%); display: flex; justify-content: center; align-items: center; font-size: 10px; background: #FFFFFF; border-radius: 50%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); cursor: pointer; }
.answer__write--attachFile { width: 100%; display: none; }
.answer__write--attachFile-list { display: inline-flex; justify-content: flex-start; align-items: center; gap: 1rem; flex-wrap: wrap; }
.answer__write--attachFile-item { padding: 0.5rem 0.75rem; position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; border: 1px solid #E5E5E5; border-radius: 0.5rem; font-size: 14px; font-weight: 400; cursor: pointer; }
.answer__write--attachFile-item::before { content: '📝'; }
.answer__write--attachFile-cancel { padding: 0.25rem; position: absolute; right: 0; top: 0; z-index: 10; transform: translate(50%, -50%); display: flex; justify-content: center; align-items: center; font-size: 10px; background: #FFFFFF; border-radius: 50%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); cursor: pointer; }
.answer__write--function-btn { padding: 0.5rem 0.5rem; display: flex; justify-content: center; align-items: center; column-gap: 0.25rem; border: 1px solid #DBDBDB; border-radius: 0.25rem; background: #FFFFFF; cursor: pointer; }
.answer__write--function-btn img, .answer__write--function-btn svg { height: 20px; }
.answer__write--function-btn path { fill: #222222; }
.answer__write--function-btn:hover { border: 1px solid #904AE8; }
.answer__write--function-btn:hover path { fill: #904AE8; }
.answer__write--function-btn:hover p { color: #904AE8; }
.answer__write--function-btn:active { border: 1px solid #904AE8; background: #904AE8; }
.answer__write--function-btn:active path { fill: #FFFFFF; }
.answer__write--function-btn:active p { color: #FFFFFF; }
.answer__write--none { padding: 1.25rem 1.5rem; width: 100%; display: none; justify-content: flex-start; align-items: center; background: #FFFFFF; border-radius: 0.625rem; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); }

.qna__function { width: 100%; display: flex; justify-content: flex-end; align-items: center; }
.qna__function--item { padding: 0.5rem 0.75rem; display: flex; justify-content: center; align-items: center; column-gap: 0.5rem; border: 1px solid #DBDBDB; border-radius: 0.25rem; cursor: pointer; background: #FFFFFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); }

.academy__footer--about { padding: 0.5rem 0.75rem 0.5rem 1.5rem; position: relative; display: inline-flex; justify-content: center; align-items: center; background: #FFFFFF; border-radius: 1.5rem; }
.academy__footer--about-icon { position: absolute; left: 0; top: 50%; width: 30px; transform: translate(-40%, -50%); }
.academy__footer--about-text { margin: 0; font-size: 0.875rem; font-weight: 600; color: #904AE8; }

.org__join--modal, .org__join--modal * { margin: 0; padding: 0; border: none; outline: none; background: transparent; }
.org__join--modal { position: fixed; left: 0; top: 0; z-index: 35; width: 100%; height: 100vh; display: none; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1px); }
.org__join--form { padding: 2rem; position: relative; width: 500px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1.25rem; background: #FFFFFF; border-radius: 1.25rem; }
.org__join--form-cancel { position: absolute; right: 1rem; top: 1rem; cursor: pointer; }
.org__join--form-item { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.625rem; }
.org__join--form-item:first-child { width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; }
.org__join--form-item:first-child p { font-size: 22px; font-weight: 600; color: #222222; }
.org__join--form-text { padding: 0.5rem 0.75rem; width: 100%; border-radius: 0.75rem; background: #F6F8FC; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); resize: none; }
.org__join--form-text:focus { box-shadow: 0 0 1px #904AE8, inset 0 0 4px #904AE8; }
.org__join--form-content { height: 200px; }
.org__join--form-submit { padding: 0.5rem 0; width: 100%; border-radius: 0.625rem; background: #904AE8; text-align: center; font-size: 18px; font-weight: 600; color: #FFFFFF; cursor: pointer; }
.org__join--form-submit.invalid { background: red; animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; -webkit-animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
.org__join--form-tip { width: 100%; font-size: 14px; font-weight: 400; color: #828282; }

.academy__container { margin: 0 auto; max-width: 1400px; width: 100%; overflow: hidden; }
.academy__setting { width: 100%; margin: 0 auto; overflow: hidden; }
.academy__visual--btn { position: absolute; top: 50%; z-index: 10; width: 60px; height: 60px; border-radius: 50%; background-color: #FFFFFF; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; cursor: pointer; }
.academy__visual--prev { left: 0; transform: translate(90%, -50%); }
.academy__visual--next { right: 0; transform: translate(-90%, -50%);  }
.academy__visual--pagination-wrapper { width: 100%; display: flex; justify-content: center; align-items: center; }
.academy__visual--pagination { width: auto !important; height: auto !important; }
.academy__visual--pagination:has(> :nth-child(2)) { margin-top: 24px; }
.academy__visual--img { max-width: 1200px; width: 100%; }
.academy__visual--info { padding: 2rem; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1px); display: none; flex-direction: column; justify-content: flex-end; align-items: flex-start; animation: fadeIn 300ms ease-out forwards; opacity: 0; }
.academy__visual--info-title { font-size: 24px; font-weight: 700; color: #FFFFFF; }
.academy__visual--info-sub { font-size: 18px; color: #FFFFFF; }
.academy__visual--none { margin: 0 auto; position: relative; max-width: 1200px; width: 100%; height: 396px; display: none; border-radius: 1.25rem; overflow: hidden; }
.academy__visual--none img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.academy__container .swiper { width: 100%; height: 396px;  }
.academy__container .swiper-wrapper { position: relative; width: 100%; height: min-content; }
.academy__container .swiper-wrapper.once { display: flex; justify-content: center; align-items: center; }
.academy__container .swiper-slide { position: relative; padding-top: 28.25%; width: 85%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border-radius: 1.875rem; overflow: hidden; }
.academy__container .swiper-slide img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1.875rem; overflow: hidden; }
.academy__container .swiper-pagination-bullet { width: 10px !important; height: 10px !important; }
.academy__container .swiper-pagination-bullet-active { background-color: #222222 !important; }
.academy__container .swiper-slide:hover .academy__visual--info { display: flex; }

.keyword { margin-top: 30px; width: 100%; }
.keyword__container { margin: 0 auto; max-width: 1200px; width: 100%; display: grid; grid-template-columns: 1fr; place-items: flex-start; gap: 30px; }
.keyword__title { font-size: 24px; font-weight: 700; }
.keyword__contents { width: 100%; display: grid; grid-template-columns: 1fr max-content; place-items: flex-start center; gap: 36px; overflow: hidden; }
.keyword__swiper { width: 100%; }
.keyword__list { width: 100%; }
.keyword__item { padding: 8px 25px; width: max-content; border: 1px solid #904AE8; border-radius: 30px; font-size: 16px; font-weight: 400; color: #904AE8; user-select: none; cursor: pointer; }
.keyword__item:before { content: '#'; }
.keyword__item:hover { background: #904AE8; color: #FFFFFF; }
.keyword__function { width: max-content; display: flex; justify-content: center; align-items: center; gap: 10px; }
.keyword__button { aspect-ratio: 1 / 1; width: 32px; background: #FFFFFF; border: 1px solid #DBDBDB; user-select: none; cursor: pointer; }
.keyword__button img { opacity: 0.5; }
.keyword__button:hover img { opacity: 1; }

.me__container { margin: 0 auto; max-width: 1200px; width: 100%; min-height: 900px; height: 100%; display: grid; grid-template-columns: 240px auto; gap: 40px; }
.me__header { width: 100%; height: 100%; border-left: 1px solid #DBDBDB; border-right: 1px solid #DBDBDB; box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.03); }
.me__header--container { position: sticky; top: 0; width: 100%; height: min-content; display: grid; grid-template-columns: 1fr; grid-template-rows: max-content min-content; gap: 0; overflow: hidden; }
.me__profile { padding: 20px; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; }
.me__profile--picture { position: relative; width: 100px; height: 100px; border: 3px solid rgba(255, 255, 255, 0.3); }
.me__profile--picture-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; object-fit: cover; }
.me__profile--change { position: absolute; right: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: #904AE8; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; cursor: pointer; }
.me__profile--default { position: absolute; right: 0; bottom: 0; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; cursor: pointer; background: #6125AC; }
.me__profile--input { display: none; }
.me__profile--text { font-size: 14px; font-weight: 400; color: #222222; }
.me__profile--user-resource { padding: 8px 15px; display: inline-flex; justify-content: center; align-items: center; border: 1px solid #FF6868; border-radius: 20px; background: #FFFFFF; font-size: 16px; font-weight: 700; color: #FF6868; cursor: pointer; }
.me__profile--confirm-btn { padding: 6px 8px; display: inline-flex; align-items: center; gap: 4px; color: #FFFFFF; background: #904AE8; border-radius: 4px; border: 1px solid #904AE8; cursor: pointer; }
.me__profile--confirm-btn img { width: 14px; height: 14px; }
.me__profile--confirm-btn span { white-space: nowrap; font-size: 14px; font-weight: 400; color: #FFFFFF; }
.me__profile--cancel-btn { padding: 6px 8px; display: inline-flex; align-items: center; gap: 4px; color: #222222; background: #FFFFFF; border-radius: 4px; border: 1px solid #DBDBDB; cursor: pointer; }
.me__profile--cancel-btn img { width: 14px; height: 14px; }
.me__profile--cancel-btn span { white-space: nowrap; font-size: 14px; font-weight: 400; color: #222222; }
.me__menu { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0; overflow: hidden; }
.me__menu--item { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: 0; overflow: hidden; }
.me__menu--item-header { padding: 20px; width: 100%; height: 100%; display: inline-flex; justify-content: flex-start; align-items: center; gap: 10px; overflow: hidden; border-top: 1px solid #DBDBDB; border-bottom: 1px solid #DBDBDB; }
.me__menu--item-icon { width: 24px; }
.me__menu--item-title { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; font-weight: 700; color: #222222; cursor: pointer; }
.me__menu--item-contents { padding: 20px; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; line-height: 36px; overflow: hidden; }
.me__menu--item-text { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 400; color: #828282; cursor: pointer; }
.me__contents { padding: 50px 0; position: relative; width: 100%; height: 100%; }

.me__course { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; gap: 30px; }
.me__course--remote { padding: 10px 10px; position: sticky; top: 0; z-index: 25; width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 14px; background: #FFFFFF; }
.me__course--remote-item { padding: 8px 25px; text-align: center; font-size: 18px; font-weight: 400; color: #904AE8; background: #FFFFFF; border: 1px solid #904AE8; border-radius: 30px; cursor: pointer; }
.me__course--header { width: 100%; display: grid; grid-template-columns: auto 2fr; gap: 20px; }
.me__course--header-side { display: inline-flex; justify-content: flex-start; align-items: flex-start; gap: 10px; }
.me__course--header-side:last-child { width: 100%; display: grid; grid-template-columns: 1fr auto; place-items: flex-start flex-end; gap: 10px; }
.me__course--create-btn { padding: 6px 16px; display: inline-flex; align-items: center; gap: 4px; color: #FFFFFF; background: #904AE8; border: 1px solid #904AE8; border-radius: 20px; cursor: pointer; }
.me__course--create-btn img { width: 20px; height: 20px; }
.me__course--create-btn svg { width: 20px; height: 20px; }
.me__course--create-btn span { white-space: nowrap; font-size: 14px; color: #FFFFFF; }
.me__course--title { white-space: nowrap; font-size: 32px; font-weight: 700; color: #222222; }
.me__course--container-title { white-space: nowrap; font-size: 24px; font-weight: 700; color: #222222; }
.me__course--subject { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px; }
.me__course--subject-item { padding: 6px 16px; display: inline-flex; align-items: center; gap: 4px; border-radius: 20px; overflow: hidden; border: 1px solid #904AE8; cursor: pointer; }
.me__course--subject-title { font-size: 14px; font-weight: 400; color: #904AE8; }
.me__course--subject-count { padding: 2px 8px; display: flex; justify-content: center; align-items: center; border-radius: 12px; font-size: 14px; font-weight: 400; color: #904AE8; overflow: hidden; background: #F5F2FB; }
.me__course--theme { width: max-content; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; border-radius: 36px; border: 1px solid #904AE8; justify-self: flex-end; }
.me__course--theme-item { width: 46px; height: 36px; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer; }
.me__course--none { width: 100%; height: 160px; border-radius: 10px; border: 1px dashed #904AE8; display: none; justify-content: center; align-items: center; }
.me__course--none-text { font-size: 18px; font-weight: 400; color: #222222; text-align: center; line-height: 24px; }
.me__course--none-text a { font-size: 18px; font-weight: 400; color: #904AE8; text-decoration: underline; cursor: pointer; }
.me__course--list { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 0; }
.me__course--item { padding: 20px; width: 100%; display: grid; grid-template-columns: 180px auto; gap: 12px; overflow: hidden; border-radius: 10px; }
.me__course--item-thumbnail { padding-top: 56%; position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 10px; cursor: pointer; }
.me__course--item-image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.me__course--item-lock { position: absolute; right: 10px; top: 10px; width: 24px; }
.me__course--item-contents { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr auto; gap: 10px; overflow: hidden; }
.me__course--item-info { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; overflow: hidden; }
.me__course--item-side { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 10px; overflow: hidden; }
.me__course--item-count { font-size: 16px; font-weight: 400; color: #828282; white-space: nowrap; }
.me__course--item-title { font-size: 16px; font-weight: 400; color: #222222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.me__course--item-content { font-size: 14px; font-weight: 400; color: #828282; white-space: nowrap; }
.me__course--item-learn { font-size: 14px; font-weight: 400; color: #828282; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me__course--item-func { height: 100%; display: flex; justify-content: center; align-items: center; }
.me__course--item-progress { padding: 4px 10px; white-space: nowrap; border: 1px solid #904AE8; border-radius: 30px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); font-size: 14px; font-weight: 400; color: #904AE8; cursor: pointer; }
.me__course--square { width: 100%; height: min-content; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 36px; }
.me__course--card { position: relative; width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; border-radius: 10px; overflow: hidden; background: #FFFFFF; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); }
.me__course--card.disabled .me__course--card-thumbnail{ pointer-events: none; cursor: default !important; user-select: none; }
.me__course--card.disabled .me__course--card-title{ pointer-events: none; cursor: default !important; user-select: none; }
.me__course--card-none { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border-radius: 10px; overflow: hidden; background: #F6F6F6; }
.me__course--card-logo { width: 120px; filter: grayscale(100%); }
.me__course--card-thumbnail { aspect-ratio: 640 / 360; position: relative; width: 100%; border-bottom: 1px solid #DBDBDB; overflow: hidden; cursor: pointer; }
.me__course--card-image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.me__course--card-play { padding: 4px; position: absolute; right: 10px; bottom: 10px; border-radius: 4px; background: #222222; font-size: 12px; font-weight: 400; color: #FFFFFF; }
.me__course--card-url { padding: 4px; position: absolute; right: 10px; bottom: 10px; border-radius: 4px; background: #FF1493; font-size: 12px; font-weight: 400; color: #FFFFFF; }
.me__course--card-lock { position: absolute; right: 10px; top: 10px; width: 30px; }
.me__course--card-info { padding: 16px 14px; position: relative; width: 100%; height: min-content; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 10px; overflow: hidden; }
.me__course--card-title { width: 100%; display: block; gap: 4px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 500; color: #222222; cursor: pointer; }
.me__course--card-title:hover { color: #904AE8; }
.me__course--card-subtitle { width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 400; color: #828282; }
.me__course--card-line { width: 100%; height: 1px; border-top: 1px solid #DBDBDB; }
.me__course--card-history { width: 100%; height: 40px; display: flex; flex-direction: column-reverse; }
.me__course--card-progress { width: 100%; height: 5px; border-radius: 5px; background: rgba(255, 104, 104, 0.3); }
.me__course--card-bar { position: relative; width: 0; height: 100%; border-radius: 5px; background: #FF6868; }
.me__course--card-now { padding: 4px 10px; position: absolute; right: 0; bottom: calc(100% + 10px); transform: translateX(50%); border: 1px solid #904AE8; border-radius: 30px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); }
.me__course--card-load { white-space: nowrap; font-size: 14px; font-weight: 400; color: #904AE8; cursor: pointer; }
.me__course--card-arrow { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); }
.me__course--card-func { width: 100%; display: grid; grid-template-columns: 1fr auto auto; gap: 10px; place-items: center; overflow: hidden; }
.me__course--card-at { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 400; color: #828282; }
.me__course--card-timeline { width: 100%; overflow: hidden; line-height: 24px; }
.me__course--card-time { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 400; color: #828282; }
.me__course--card-option { padding: 4px; display: flex; justify-content: center; align-items: center; border-radius: 4px; background: #FFFFFF; cursor: pointer; }
.me__course--card-option img { width: 24px; }
.me__course--card-cnt { font-size: 16px; font-weight: 400; color: #828282; }
.me__course--card-student { display: inline-flex; justify-content: center; align-items: center; gap: 4px; overflow: hidden; }
.me__course--card-student span { white-space: nowrap; font-size: 16px; font-weight: 400; color: #828282; }
.me__course--card-option:hover { background: #F5F2FB; }
.me__course--remote-item:hover { color: #FFFFFF; background: #904AE8; }
.me__course--remote-item.active { color: #FFFFFF; background: #904AE8; }
.me__course--item:hover { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); }
.me__course--item-title:hover { color: #904AE8; }
.me__course--subject-item:hover { background: #F5F2FB; }
.me__course--theme-item:hover { background: #904AE8; box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25); }
.me__course--theme-item.active { background: #904AE8; box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25); }
.me__course--subject-item.active { background: #904AE8; }
.me__course--theme-item:hover svg path { fill: #FFFFFF; }
.me__course--theme-item.active svg path { fill: #FFFFFF; }
.me__course--subject-item.active .me__course--subject-title { color: #FFFFFF; }
.me__course--subject-item.active .me__course--subject-count { color: #904AE8; background: #FFFFFF; }
.me__course--card-bar.low .me__course--card-now   { transform: translateX(80%); }
.me__course--card-bar.low .me__course--card-arrow { left: 20%; }
.me__course--card-bar.high .me__course--card-now   { transform: translateX(13%); }
.me__course--card-bar.high .me__course--card-arrow { left: unset; right: 6%; }
.me__course--card.meeting .me__course--card-title:before { content: url("/public/images/icon/meeting.svg"); filter: grayscale(1); margin-right: 4px; width: 16px; height: 16px; display: inline-block; transform: translateY(10%); user-select: none; cursor: default; }
.me__course--card.meeting .me__course--card-thumbnail { filter: grayscale(1); }
.me__course--card.meeting.open .me__course--card-thumbnail { filter: unset; }
.me__course--card.meeting.open .me__course--card-title:before { filter: unset; }
.me__course--card-btn.state { padding: 6px; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; background: #904AE8; border-radius: 4px; font-size: 14px; font-weight: 400; color: #FFFFFF; cursor: pointer; user-select: none; }
.me__course--card-btn.state.disable { background: #C7C6C8; pointer-events: none; cursor: default; }
.me__course--card-btn.state.wait { background: #904AE8; }
.me__course--card-btn.state.start { background: #FF8080; }
.me__course--card-btn.state.end { background: #9980FF; }
.me__course--card-btn.state.view { background: #904AE8; }
.me__course--card-btn.edit { padding: 6px; position: absolute; right: 10px; top: 10px; width: min-content; display: inline-flex; justify-content: center; align-items: center; gap: 4px; border-radius: 4px; cursor: pointer; user-select: none; }
.me__course--card-btn.edit img { width: 12px; }
.me__course--card-btn.edit svg { width: 12px; }
.me__course--card-btn.edit:hover { background: #DBDBDB; }
.me__course--read { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 30px; }
.me__course--info { padding: 20px; width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; overflow: hidden; background: #FFFFFF; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); border-radius: 10px; }
.me__course--info-header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.me__course--info-side { position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 10px; }
.me__course--info-edit { padding: 4px 6px; display: inline-flex; justify-content: center; align-items: center; gap: 4px; background: #904AE8; border-radius: 4px; cursor: pointer; }
.me__course--info-edit img { width: 20px; }
.me__course--info-edit span { font-size: 14px; font-weight: 400; color: #FFFFFF; }
.me__course--info-invite { padding: 4px 6px; display: inline-flex; justify-content: center; align-items: center; gap: 4px; background: #FFFFFF; border: 1px solid #DBDBDB; border-radius: 4px; cursor: pointer; }
.me__course--info-invite img { width: 20px; }
.me__course--info-invite span { font-size: 14px; font-weight: 400; color: #222222; }
.me__course--info-contents { width: 100%; display: grid; grid-template-columns: 260px auto; grid-auto-rows: min-content; gap: 30px; overflow: hidden; }
.me__course--info-thumbnail { padding-top: 56%; position: relative; width: 100%; height: fit-content; border-radius: 10px; overflow: hidden; border: 1px solid #DBDBDB; }
.me__course--info-thumbnail img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.me__course--info-category { font-size: 16px; font-weight: 500; color: #222222; }
.me__course--info-title { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 24px; font-weight: 700; color: #222222; }
.me__course--info-detail { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; overflow: hidden; }
.me__course--info-column { width: 75%; display: grid; grid-template-columns: 1.25fr 1fr 1fr; place-items: center flex-start; gap: 44px; overflow: hidden; }
.me__course--info-row { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; overflow: hidden; line-height: 28px; }
.me__course--info-row p { font-size: 16px; font-weight: 500; }
.me__course--info-inline { display: inline-flex; justify-content: center; align-items: center; gap: 6px; }
.me__course--info-inline img { width: 24px; }
.me__course--info-inline span { font-size: 16px; font-weight: 400; color: #828282; }
.me__course--file { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 8px; overflow: hidden; }
.me__course--file-header { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 8px; overflow: hidden; }
.me__course--file-title { font-size: 16px; font-weight: 400; color: #828282; }
.me__course--file-input { display: none; }
.me__course--file-btn { padding: 4px 6px; display: inline-flex; justify-content: center; align-items: center; gap: 4px; background: #904AE8; border-radius: 4px; cursor: pointer; user-select: none; }
.me__course--file-btn img { width: 20px; }
.me__course--file-btn span { font-size: 14px; font-weight: 400; color: #FFFFFF; }
.me__course--file-contents { width: 100%; display: inline-flex; justify-content: flex-start; align-items: center; gap: 1rem; flex-wrap: wrap; }
.me__course--file-item { padding: 0.5rem 0.75rem; max-width: 170px; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; place-items: center; border: 1px solid #E5E5E5; border-radius: 10px; font-size: 14px; font-weight: 400; cursor: pointer; }
.me__course--file-item::before { content: '📝'; }
.me__course--file-name { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 400; cursor: pointer; }
.me__course--file-delete { font-size: 14px; font-weight: 400; cursor: pointer; }
.me__course--desc { padding: 20px; width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; overflow: hidden; background: #FFFFFF; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); border-radius: 10px; }
.me__course--desc-header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; overflow: hidden; }
.me__course--desc-contents { width: 100%; max-height: 600px; overflow-y: auto; display: none; }
.me__course--learn { padding: 20px; width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 30px; overflow: hidden; background: #FFFFFF; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); border-radius: 10px; }
.me__course--learn-header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; overflow: hidden; }
.me__course--learn-side { display: inline-flex; justify-content: center; align-items: center; gap: 26px; }
.me__course--learn-info { display: inline-flex; justify-content: center; align-items: center; gap: 6px; }
.me__course--learn-info img { width: 20px; }
.me__course--learn-info span { font-size: 16px; font-weight: 400; color: #828282; }
.me__course--learn-more { padding: 4px 6px; display: inline-flex; justify-content: center; align-items: center; gap: 6px; overflow: hidden; border: 1px solid #904AE8; border-radius: 4px; cursor: pointer; }
.me__course--learn-more img { width: 20px; }
.me__course--learn-more span { font-size: 14px; font-weight: 400; color: #904AE8; }
.me__course--learn-contents { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; overflow: hidden; }
.me__course--learn-column { padding-right: 20px; width: 100%; display: grid; grid-template-columns: 1fr 1fr 0.5fr; gap: 20px; overflow: hidden; }
.me__course--learn-column p { font-size: 14px; font-weight: 400; color: #828282; }
.me__course--learn-list { padding-right: 20px; width: 100%; max-height: 400px; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 20px; overflow-y: auto; }
.me__course--learn-item { width: 100%; display: grid; grid-template-columns: 1fr 1fr 0.5fr; place-items: center; gap: 20px; overflow: hidden; }
.me__course--learn-user { width: 100%; display: grid; grid-template-columns: 48px auto; gap: 20px; place-items: center flex-start; overflow: hidden; }
.me__course--learn-profile { padding-top: 100%; position: relative; width: 100%; overflow: hidden; border-radius: 5px; background: #f5f2fb; }
.me__course--learn-profile img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.me__course--learn-name { font-size: 16px; font-weight: 400; color: #222222; cursor: pointer; }
.me__course--learn-name span { font-size: 16px; font-weight: 400; color: #828282; }
.me__course--learn-progress { width: 100%; display: grid; grid-template-columns: 4fr 1fr; gap: 38px; place-items: center flex-start; overflow: hidden; }
.me__course--learn-bar { position: relative; width: 100%; height: 5px; border-radius: 5px; overflow: hidden; background: #FF68684D; }
.me__course--learn-bar div { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0; height: 100%; background: #FF6868; }
.me__course--learn-now { padding: 4px 10px; text-align: center; border-radius: 10px; border: 1px solid #FF6868; font-size: 14px; font-weight: 400; color: #FF6868; }
.me__course--learn-date { height: 100%; display: flex; justify-content: center; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; font-size: 16px; font-weight: 400; color: #222222; }
.me__course--community { padding: 20px; width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 20px; overflow: hidden; background: #FFFFFF; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); border-radius: 10px; }
.me__course--community-header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; overflow: hidden; }
.me__course--community-contents { padding-right: 20px; width: 100%; max-height: 450px; overflow-y: auto; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 0; }
.me__course--community-more { padding: 4px 6px; display: inline-flex; justify-content: center; align-items: center; gap: 6px; overflow: hidden; border: 1px solid #904AE8; border-radius: 6px; cursor: pointer; }
.me__course--community-more img { width: 20px; }
.me__course--community-more span { font-size: 14px; font-weight: 400; color: #904AE8; }
.me__course--video { padding: 20px; width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 20px; overflow: hidden; background: #FFFFFF; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); border-radius: 10px; }
.me__course--video-header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; overflow: hidden; }
.me__course--video-contents { width: 100%; height: min-content; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; column-gap: 15px; row-gap: 30px; }
.me__course--meeting { padding: 20px; width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 20px; overflow: hidden; background: #FFFFFF; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); border-radius: 10px; }
.me__course--meeting-header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; overflow: hidden; }
.me__course--meeting-contents { width: 100%; height: min-content; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 15px; row-gap: 30px; }
.me__course--invite { padding: 12px; position: absolute; right: 0; top: 0; z-index: 10; width: 100%; background: #FFFFFF; border: 1px solid rgba(0,0,0,.15); border-radius: 0.5rem; display: none; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; cursor: default; }
.me__course--invite.active { display: flex; }
.me__course--invite-btn { position: absolute; top: 14px; right: 14px; cursor: pointer; }
.me__course--invite-btn img { width: 24px; height: 24px; }
.me__course--meeting-btn { position: absolute; top: 14px; right: 14px; cursor: pointer; }
.me__course--meeting-btn img { width: 20px; height: 20px; }
.me__course--contents-append { padding: 6px; display: inline-flex; justify-content: center; align-items: center; gap: 4px; background: #904AE8; border-radius: 4px; cursor: pointer; }
.me__course--contents-append img { width: 14px; }
.me__course--contents-append svg { width: 14px; }
.me__course--contents-append span { font-size: 14px; font-weight: 400; color: #FFFFFF; }
.me__course--contents-edit { padding: 6px; display: inline-flex; justify-content: center; align-items: center; gap: 4px; background: #904AE8; border-radius: 4px; cursor: pointer; }
.me__course--contents-edit img { width: 14px; }
.me__course--contents-edit svg { width: 14px; }
.me__course--contents-edit span { font-size: 14px; font-weight: 400; color: #FFFFFF; }
.me__course--learn-name:hover { text-decoration: underline; }
.me__course--learn-column p:last-child { text-align: center; }
.me__course--edit          { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 30px; }
.me__course--edit-header   { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.me__course--edit-side     { display: inline-flex; align-items: center; gap: 10px; }
.me__course--edit-cancel   { padding: 6px 16px; display: inline-flex; align-items: center; gap: 4px; border-radius: 4px; overflow: hidden; color: #FFFFFF; background: #904AE8; cursor: pointer; user-select: none; }
.me__course--edit-contents { width: 100%; height: 100%; display: grid; grid-template-columns: 3.5fr 1fr; gap: 20px; background: #FFFFFF; overflow: hidden; }

.me__assignment { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; gap: 30px; }
.me__assignment--header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.me__assignment--title { white-space: nowrap; font-size: 32px; font-weight: 700; color: #222222; }
.me__assignment--inline { display: inline-flex; justify-content: center; align-items: center; gap: 10px; }
.me__assignment--confirm-btn { padding: 6px 16px; display: inline-flex; align-items: center; gap: 4px; color: #FFFFFF; background: #904AE8; border: 1px solid #904AE8; border-radius: 20px; cursor: pointer; user-select: none; }
.me__assignment--confirm-btn img { width: 20px; height: 20px; }
.me__assignment--confirm-btn svg { width: 20px; height: 20px; }
.me__assignment--confirm-btn span { white-space: nowrap; font-size: 14px; color: #FFFFFF; }
.me__assignment--cancel-btn { padding: 6px 16px; display: inline-flex; align-items: center; gap: 4px; color: #FFFFFF; background: #AAAAAA; border: 1px solid #AAAAAA; border-radius: 20px; cursor: pointer; user-select: none; }
.me__assignment--cancel-btn img { width: 20px; height: 20px; }
.me__assignment--cancel-btn svg { width: 20px; height: 20px; }
.me__assignment--cancel-btn span { white-space: nowrap; font-size: 14px; color: #FFFFFF; }
.me__assignment--create-btn { padding: 6px 16px; display: inline-flex; align-items: center; gap: 4px; color: #FFFFFF; background: #904AE8; border: 1px solid #904AE8; border-radius: 20px; cursor: pointer; user-select: none; }
.me__assignment--create-btn img { width: 20px; height: 20px; }
.me__assignment--create-btn svg { width: 20px; height: 20px; }
.me__assignment--create-btn span { white-space: nowrap; font-size: 14px; color: #FFFFFF; }
.me__assignment--search { padding: 10px 14px 10px 20px; width: 100%; max-width: 200px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #DBDBDB; border-radius: 20px; }
.me__assignment--search-input { width: 100%; font-size: 14px; font-weight: 400; color: #222222; }
.me__assignment--search-input::placeholder { font-size: 14px; font-weight: 400; color: #B7B7B7; }
.me__assignment--search-btn { width: 14px; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; user-select: none; }
.me__assignment--search-btn img { width: 14px; height: 14px; }
.me__assignment--course { padding: 10px 14px; width: 100%; max-width: 200px; border: 1px solid #DBDBDB; border-radius: 20px; font-size: 14px; font-weight: 400; color: #222222; }
.me__assignment--course-selector { width: 100%; }
.me__assignment--contents { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; place-items: flex-start center; gap: 20px; }
.me__assignment--list { position: relative; width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 0; background: #FFFFFF; border: 1px solid #DBDBDB; border-radius: 10px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); }
.me__assignment--list.wait { border: 1px solid rgba(0, 0, 0, 0); border-radius: 10px; box-shadow: unset; }
.me__assignment--list.wait:after { content: url("/public/images/common/portal/loading.svg"); width: 100%; height: 300px; display: flex; justify-content: center; align-items: center; background: #FFFFFF; backdrop-filter: blur(1px); }
.me__assignment--list.none { border: 1px solid rgba(0, 0, 0, 0); border-radius: 10px; box-shadow: unset; }
.me__assignment--list.none:after { content: "조회된 과제가 없습니다."; height: 300px; display: flex; justify-content: center; align-items: center; text-align: center; }
.me__assignment--create { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 20px; overflow: hidden; }
.me__assignment--item { padding: 14px; width: 100%; display: grid; grid-template-columns: 100px 2fr 70px 70px 1fr 1fr 30px; place-items: center flex-start; gap: 20px; }
.me__assignment--item:nth-child(n+2) { border-top: 1px solid #DBDBDB; }
.me__assignment--item-thumbnail { padding-top: 56%; position: relative; width: 100%; overflow: hidden; border-radius: 4px; cursor: pointer; user-select: none; }
.me__assignment--item-thumbnail img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.me__assignment--item-info { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; overflow: hidden; }
.me__assignment--item-detail { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 4px; overflow: hidden; }
.me__assignment--item-course { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 300; color: #828282; user-select: none; }
.me__assignment--item-dot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; font-weight: 300; color: #828282; user-select: none; }
.me__assignment--item-date { white-space: nowrap; font-size: 13px; font-weight: 300; color: #828282; user-select: none; }
.me__assignment--item-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 600; color: #222222; cursor: pointer; user-select: none; }
.me__assignment--item-title:hover { color: #904AE8; }
.me__assignment--item-status { padding: 4px 6px; justify-self: center; width: min-content; background: #FFEBC2; border-radius: 4px; white-space: nowrap; font-size: 14px; font-weight: 500; color: #FF833B; }
.me__assignment--item-status.deadline { background: #FFC2C2; color: #FF3B3B; }
.me__assignment--item-status.grading { background: #C2F2FF; color: #0075FF; }
.me__assignment--item-status.success { background: #C2FFCF; color: #00A527; }
.me__assignment--item-score { justify-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 500; color: #222222; }
.me__assignment--item-score strong { font-size: 14px; font-weight: 500; color: #904AE8; }
.me__assignment--item-deadline { justify-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 500; color: #222222; }
.me__assignment--item-deadline strong { font-size: 14px; font-weight: 500; color: #904AE8; }
.me__assignment--item-deadline.red strong { font-size: 14px; font-weight: 500; color: #FF6B6B; }
.me__assignment--item-user { justify-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 500; color: #222222; }
.me__assignment--item-function { position: relative; }
.me__assignment--item-btn { width: 30px; height: 30px; display: inline-flex; justify-content: center; align-items: center; border-radius: 4px; cursor: pointer; user-select: none; }
.me__assignment--item-btn:hover { background: #DBDBDB; }
.me__assignment--item-menu { padding: 6px; position: absolute; right: 50%; top: 50%; display: none; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 0; overflow: hidden; background: #FFFFFF; border: 1px solid #DBDBDB; border-radius: 4px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); }
.me__assignment--item-menu.active { display: grid; }
.me__assignment--item-menu div { padding: 6px; width: 100%; display: grid; grid-template-columns: 14px auto; place-items: center flex-start; gap: 10px; border-radius: 4px; cursor: pointer; user-select: none; }
.me__assignment--item-menu div:hover { background: #DBDBDB; }
.me__assignment--item-menu div img { width: 14px; height: 14px; }
.me__assignment--item-menu div span { white-space: nowrap; font-size: 14px; font-weight: 400; color: #222222; }
.me__assignment--create-item { width: 100%; display: grid; grid-template-columns: 1fr 8fr; grid-auto-rows: min-content; place-items: center flex-start; gap: 10px; }
.me__assignment--create-item:last-child { place-items: flex-start; }
.me__assignment--create-caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 500; color: #222222; }
.me__assignment--create-textarea { width: 100%; min-height: 300px; }
.me__assignment--create-input { padding: 10px 14px; width: 100%; display: flex; justify-content: space-between; align-items: center; border: 1px solid #AAAAAA; border-radius: 4px; }
.me__assignment--create-twin { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; place-items: center flex-start; gap: 10px; }
.me__assignment--create-search { padding: 10px 14px; width: 100%; height: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 8px; border-radius: 4px; border: 1px solid #AAAAAA; background: #FFFFFF; user-select: none; }
.me__assignment--create-search input { width: 100%; font-size: 14px; font-weight: 400; color: #222222; }
.me__assignment--create-search div { width: 20px; height: 20px; cursor: pointer; user-select: none; }
.me__assignment--create-search img { width: 20px; height: 20px; }
.me__assignment--user { width: 100%; display: grid; grid-template-columns: 1fr 1.5fr; place-items: flex-start; gap: 20px; overflow: hidden; }
.me__assignment--user-left { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 20px; place-items: flex-start; }
.me__assignment--user-container { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-auto-rows: min-content; gap: 20px; place-items: flex-start; }
.me__assignment--user-header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.me__assignment--user-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 600; color: #222222; }
.me__assignment--user-count { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 500; color: #222222; }
.me__assignment--user-list { padding: 20px; position: relative; width: 100%; height: 300px; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 0; place-items: flex-start; border: 1px solid #AAAAAA; border-radius: 6px; overflow-y: auto; box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); }
.me__assignment--user-list.wait:after { content: url("/public/images/icon/load.svg"); position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #FFFFFF; backdrop-filter: blur(1px); cursor: default; user-select: none; }
.me__assignment--user-list.none:after { content: '조회된 학생이 없습니다.'; position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #FFFFFF; font-size: 16px; font-weight: 500; color: #222222; cursor: default; user-select: none; }
.me__assignment--user-item { padding: 10px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; place-items: center flex-start; gap: 10px; border: 1px solid rgba(0, 0, 0, 0); border-radius: 4px; cursor: default; user-select: none; }
.me__assignment--user-list.submitter .me__assignment--user-item:hover { background: #FAF6FF; border: 1px solid #904AE8; }
.me__assignment--user-list.submitter .me__assignment--user-item.selected { background: #FAF6FF; border: 1px solid #904AE8; }
.me__assignment--user-profile { width: 100%; display: grid; grid-template-columns: 15px auto; gap: 10px; overflow: hidden; cursor: pointer; }
.me__assignment--user-function { width: 100%; display: grid; grid-template-columns: 2fr 1fr; place-items: center; gap: 10px; }
.me__assignment--user-score { padding: 6px; display: grid; grid-template-columns: 1fr auto min-content; place-items: center flex-end; gap: 4px; background: #FFFFFF; border: 1px solid #DBDBDB; border-radius: 4px; }
.me__assignment--user-score.focus { border: 1px solid #904AE8; }
.me__assignment--user-score input { width: 50px; text-align: right; font-size: 14px; font-weight: 500; color: #222222; }
.me__assignment--user-list.submitter .me__assignment--user-item.disabled .me__assignment--user-score { background: #EEEEEE; filter: grayscale(1); pointer-events: none; user-select: none; cursor: default; }
.me__assignment--user-discern { font-size: 14px; font-weight: 400; color: #AAAAAA; }
.me__assignment--user-max { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 400; color: #AAAAAA; }
.me__assignment--user-done { padding: 6px; border-radius: 4px; white-space: nowrap; font-size: 16px; font-weight: 500; color: #904AE8; cursor: pointer; user-select: none; }
.me__assignment--user-done:hover { background: #904AE8; color: #FFFFFF; }
.me__assignment--user-icon { position: relative; width: 15px; height: 15px; overflow: hidden; border-radius: 4px; }
.me__assignment--user-icon img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.me__assignment--user-content { padding: 20px; position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: 40px 1px 400px 1px auto; grid-auto-rows: min-content; gap: 20px; place-items: flex-start; border: 1px solid #AAAAAA; border-radius: 6px; overflow: hidden; box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); }
.me__assignment--user-content.wait:after { content: url("/public/images/icon/load.svg"); position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #FFFFFF; backdrop-filter: blur(1px); cursor: default; user-select: none; }
.me__assignment--user-content.none:after { content: '제출한 학생을 선택해주세요.'; position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #FFFFFF; font-size: 16px; font-weight: 500; color: #222222; cursor: default; user-select: none; }
.me__assignment--user-info { width: 100%; display: grid; grid-template-columns: 40px auto; place-items: center flex-start; gap: 10px; overflow: hidden; }
.me__assignment--user-thumbnail { position: relative; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border: 1px solid #DBDBDB; border-radius: 4px; overflow: hidden; }
.me__assignment--user-thumbnail img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.me__assignment--user-detail { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; overflow: hidden; }
.me__assignment--user-name { position: relative; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 600; color: #222222; }
.me__assignment--user-date { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 300; color: #828282; user-select: none; }
.me__assignment--user-line { width: 100%; height: 1px; background: #DBDBDB; }
.me__assignment--user-description { padding: 0 10px; width: 100%; height: 400px; overflow-y: auto; word-break: break-all; overscroll-behavior-y: contain; }
.me__assignment--user-description img { max-width: 100%; }
.me__assignment--user-attach { padding: 0 10px; position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 10px; place-items: center; overflow-y: auto; overscroll-behavior-y: contain; }
.me__assignment--user-attach.none:after { content: '조회된 첨부파일이 없습니다.'; position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #EEEEEE; border-radius: 4px; font-size: 16px; font-weight: 500; color: #222222; cursor: default; user-select: none; }
.me__assignment--user-file { padding: 10px; width: 100%; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; place-items: center; border: 1px solid #DBDBDB; border-radius: 4px; font-size: 16px; font-weight: 500; color: #222222; cursor: pointer; }
.me__assignment--user-file::before { content: '📝'; }

.me__assignment--info { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 20px; place-items: flex-start; }
.me__assignment--info.fold .me__assignment--info-title:before { transform: rotate(0); }
.me__assignment--info.fold .me__assignment--info-contents { display: none; }
.me__assignment--info-header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.me__assignment--info-title { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 4px; place-items: center flex-start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 600; color: #222222; cursor: pointer; user-select: none; }
.me__assignment--info-title:before { content: url("/public/images/icon/right-icon.svg"); width: 16px; height: 16px; transform: rotate(90deg); }
.me__assignment--info-contents { padding: 20px; position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1px 1.5fr; grid-template-rows: 678px; place-items: flex-start; gap: 20px; overflow: hidden; border: 1px solid #AAAAAA; border-radius: 6px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); }
.me__assignment--info-contents.wait:after { content: url("/public/images/icon/load.svg"); position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #FFFFFF; backdrop-filter: blur(1px); cursor: default; user-select: none; }
.me__assignment--info-left { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 20px; place-items: flex-start; overflow-y: auto; overscroll-behavior: contain; }
.me__assignment--info-thumbnail { padding-top: 56%; position: relative; width: 100%; border-radius: 10px; overflow: hidden; background: #AAAAAA; }
.me__assignment--info-thumbnail img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.me__assignment--info-info { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 6px; place-items: flex-start; }
.me__assignment--info-course { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 17px; font-weight: 600; color: #222222; }
.me__assignment--info-teacher { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 500; color: #AAAAAA; }
.me__assignment--info-date { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 500; color: #222222; }
.me__assignment--info-score { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 500; color: #222222; }
.me__assignment--info-status { padding: 10px; width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; background: #FFEBC2; border-radius: 4px; font-size: 15px; font-weight: 500; color: #FF833B; user-select: none; }
.me__assignment--info-status.deadline { background: #FFC2C2; color: #FF3B3B; }
.me__assignment--info-status.success { background: #C2FFCF; color: #00A527; }
.me__assignment--info-content { padding: 20px; position: relative; width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.me__assignment--info-line { width: 1px; height: 100%; background: #AAAAAA; }

.me__assignment--send { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1.5fr; grid-template-rows: 678px; place-items: flex-start; gap: 20px; overflow: hidden; }
.me__assignment--send-left { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 20px; place-items: flex-start; }
.me__assignment--send-container { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 20px; place-items: flex-start; }
.me__assignment--send-header { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 10px; }
.me__assignment--send-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 600; color: #222222; }
.me__assignment--send-count { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 500; color: #222222; }
.me__assignment--send-list { padding: 20px; position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 10px; place-items: flex-start; border: 1px solid #AAAAAA; border-radius: 6px; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); }
.me__assignment--send-list.wait:after { content: url("/public/images/icon/load.svg"); position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #FFFFFF; backdrop-filter: blur(1px); cursor: default; user-select: none; }
.me__assignment--send-list.none:after { content: '제출한 과제가 없습니다.'; position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #FFFFFF; font-size: 16px; font-weight: 500; color: #222222; cursor: default; user-select: none; }
.me__assignment--send-append { padding: 10px; width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; background: #904AE8; border: 1px solid #904AE8; border-radius: 4px; cursor: pointer; user-select: none; }
.me__assignment--send-append img { width: 15px; height: 15px; }
.me__assignment--send-append span { font-size: 15px; font-weight: 500; color: #FFFFFF; }
.me__assignment--send-append.disabled { filter: grayscale(1); cursor: none; user-select: none; pointer-events: none; }
.me__assignment--send-item { padding: 10px; width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; border: 1px solid rgba(0, 0, 0, 0); border-radius: 4px; font-size: 15px; font-weight: 500; color: #222222; cursor: pointer; user-select: none; }
.me__assignment--send-item:hover { background: #FAF6FF; border: 1px solid #904AE8; }
.me__assignment--send-item.selected { background: #FAF6FF; border: 1px solid #904AE8; }
.me__assignment--send-item.send:before { content: "제출됨"; padding: 4px; background: #904AE8; border-radius: 4px; font-size: 13px; font-weight: 300; color: #FFFFFF; }
.me__assignment--send-content { padding: 20px; position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: 40px 1px 1fr 1px auto; grid-auto-rows: min-content; gap: 20px; place-items: flex-start; border: 1px solid #AAAAAA; border-radius: 6px; overflow: hidden; box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); }
.me__assignment--send-content.end { grid-template-rows: minmax(441px, 1fr) 1px auto; }
.me__assignment--send-content.end .me__assignment--send-info { display: none; }
.me__assignment--send-content.end .me__assignment--send-line:nth-child(2) { display: none; }
.me__assignment--send-content.wait:after { content: url("/public/images/icon/load.svg"); position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #FFFFFF; backdrop-filter: blur(1px); cursor: default; user-select: none; }
.me__assignment--send-content.none:after { content: '제출한 과제를 선택해주세요.'; position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #FFFFFF; font-size: 16px; font-weight: 500; color: #222222; cursor: default; user-select: none; }
.me__assignment--send-info { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 10px; overflow: hidden; }
.me__assignment--send-thumbnail { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border: 1px solid #DBDBDB; border-radius: 4px; }
.me__assignment--send-detail { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; overflow: hidden; }
.me__assignment--send-name { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 600; color: #222222; }
.me__assignment--send-date { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 300; color: #828282; user-select: none; }
.me__assignment--send-line { width: 100%; height: 1px; background: #DBDBDB; }
.me__assignment--send-description { padding: 0 10px; width: 100%; height: 100%; overflow-y: auto; word-break: break-all; overscroll-behavior-y: contain; }
.me__assignment--send-description img { max-width: 100%; }
.me__assignment--send-attach { padding: 0 10px; position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 10px; place-items: center; overflow-y: auto; overscroll-behavior-y: contain; }
.me__assignment--send-attach.none:after { content: '조회된 첨부파일이 없습니다.'; position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #EEEEEE; border-radius: 4px; font-size: 16px; font-weight: 500; color: #222222; cursor: default; user-select: none; }
.me__assignment--send-file { padding: 10px; width: 100%; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; place-items: center; border: 1px solid #DBDBDB; border-radius: 4px; font-size: 16px; font-weight: 500; color: #222222; cursor: pointer; }
.me__assignment--send-file::before { content: '📝'; }

/* 이름 수정 */
.course__create--back-btn                   { padding: 0.5rem 1rem; background: #FFFFFF; border: 1px solid #DBDBDB; border-radius: 0.25rem; cursor: pointer; }
.course__create--done-btn                   { padding: 0.5rem 1.5rem; width: 100%; background: #904AE8; text-align: center; border-radius: 0.5rem; font-size: 18px; font-weight: 700; color: #FFFFFF; cursor: pointer; }
.course__create--contents                   { width: 100%; height: 100%; display: grid; grid-template-columns: 3.5fr 1fr; gap: 1rem; background: #FFFFFF; }
.course__create--main                       { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-content: flex-start; gap: 2rem; background: #FFFFFF; border-radius: 0.5rem; }
.course__create--teacher                    { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1rem; }
.course__create--teacher-header             { padding-bottom: 0.5rem; width: 100%; display: flex; justify-content: flex-start; align-content: center; gap: 0.5rem; border-bottom: 1px solid #DBDBDB; }
.course__create--teacher-title              { font-size: 18px; font-weight: 600; color: #222222; }
.course__create--teacher-contents           { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 1rem; }
.course__create--teacher-contents > div     { padding: 1rem; width: 100%; height: 100%; max-height: 200px; border: 1px solid #E5E5E5; border-radius: 0.5rem; overflow-y: auto; }
.course__create--teacher-wrapper            { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.25rem; overflow-y: auto; }
.course__create--teacher-item               { padding: 0.5rem 0.75rem; position: relative; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; border: 1px solid #E5E5E5; border-radius: 0.5rem; font-size: 14px; font-weight: 400; cursor: pointer; flex-shrink: 0; }
.course__create--teacher-wrapper
.course__create--teacher-item:after         { content: '❌'; position: absolute; right: 0.75rem; background: #FFFFFF; }
.course__create--teacher-func               { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 1rem; overflow: hidden; }
.course__create--teacher-search             { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem; }
.course__create--teacher-search input       { padding: 0.5rem; width: 100%; border: 1px solid #DBDBDB; border-radius: 0.25rem; background: #FFFFFF; }
.course__create--teacher-search span        { padding: 0.5rem 1rem; color: #FFFFFF; background: #904AE8; border-radius: 0.25rem; cursor: pointer; }
.course__create--teacher-list               { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.25rem; overflow-y: auto; }
.course__create--teacher-list
.course__create--teacher-item:after         { content: '➕'; position: absolute; right: 0.75rem; background: #FFFFFF; }
.course__create--thumbnail-wrapper          { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1rem; }
.course__create--thumbnail-contents         { width: 100%; height: fit-content; display: grid; grid-template-columns: 1fr 1.5fr; gap: 1rem; place-items: flex-start; }
.course__create--thumbnail-header           { padding-bottom: 0.5rem; width: 100%; display: flex; justify-content: flex-start; align-content: center; gap: 0.5rem; border-bottom: 1px solid #DBDBDB; }
.course__create--thumbnail-title            { font-size: 18px; font-weight: 600; color: #222222; }
.course__create--thumbnail                  { aspect-ratio: 640 / 360; position: relative; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; border: 3px solid #FFFFFF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
.course__create--thumbnail img              { position: absolute; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.course__create--thumbnail-file             { display: none; width: 0; height: 0; }
.course__create--thumbnail-btn              { padding: 6px 10px; background: #FFFFFF; border-radius: 0.25rem; border: 1px solid #904AE8; display: inline-flex; justify-content: center; align-items: center; gap: 0.25rem; font-size: 14px; font-weight: 500; color: #904AE8; cursor: pointer; }
.course__create--thumbnail-btn:hover        { background: #904AE8; color: #FFFFFF; }
.course__create--side                       { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1rem; }
.course__create--title                      { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1rem; }
.course__create--title-header               { width: 100%; display: flex; justify-content: flex-start; align-content: center; gap: 0.5rem; }
.course__create--title-name                 { font-size: 18px; font-weight: 600; color: #222222; }
.course__create--title-contents             { width: 100%; display: flex; justify-content: center; align-content: center; border-radius: 0.25rem; border: 1px solid #ced4da; overflow: hidden; }
.course__create--title-input                { padding: 6px 10px; width: 100%; outline: none; border: none; font-size: 14px; font-weight: 400; background: #FFFFFF; }
.course__create--title-btn                  { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; padding: 0.25rem 0.75rem; white-space: nowrap; border: 1px solid #904AE8; background: #FFFFFF; cursor: pointer; }
.course__create--title-btn span             { font-size: 14px; font-weight: 400; color: #904AE8; }
.course__create--title-btn:hover            { background: #904AE8; }
.course__create--title-btn:hover span       { color: #FFFFFF; }
.course__create--option                     { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1rem; }
.course__create--option-item                { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0; border-radius: 0.5rem; border: 1px solid #DBDBDB; overflow: hidden; }
.course__create--option-header              { padding: 0.5rem 0.75rem; width: 100%; display: flex; justify-content: flex-start; align-items: center; background: #F9FAFB; border-bottom: 1px solid #DBDBDB; }
.course__create--option-title               { font-size: 15px; font-weight: 600; color: #222222; }
.course__create--option-contents            { padding: 0.5rem 0.75rem; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; background: #FFFFFF; }
.course__create--option-function            { width: 100%; display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; }
.course__create--option-btn                 { padding: 0.25rem 0.75rem; border-radius: 0.25rem; white-space: nowrap; border: 1px solid #904AE8; background: #FFFFFF; cursor: pointer; }
.course__create--option-btn span            { font-size: 14px; font-weight: 400; color: #904AE8; }
.course__create--option-btn:hover           { background: #904AE8; }
.course__create--option-btn:hover span      { color: #FFFFFF; }
.course__create--description                { width: 100%; height: auto; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; gap: 0.5rem; }
.course__create--description-header         { padding-bottom: 0.5rem; width: 100%; display: flex; justify-content: flex-start; align-content: center; gap: 0.5rem; border-bottom: 1px solid #DBDBDB; }
.course__create--description-name           { font-size: 18px; font-weight: 600; color: #222222; }
.course__create--description-contents       { width: 100%; height: 350px; overflow: hidden; }
.course__create--description-function       { width: 100%; display: flex; justify-content: flex-end; align-items: center; }
.course__create--description-btn            { padding: 0.25rem 0.75rem; border-radius: 0.25rem; white-space: nowrap; border: 1px solid #904AE8; background: #FFFFFF; cursor: pointer; }
.course__create--description-btn span       { font-size: 14px; font-weight: 400; color: #904AE8; }
.course__create--description-btn:hover      { background: #904AE8; }
.course__create--description-btn:hover span { color: #FFFFFF; }
.course__create--attach                     { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; }
.course__create--attach-header              { padding-bottom: 0.5rem; width: 100%; display: flex; justify-content: space-between; align-content: center; gap: 0.5rem; border-bottom: 1px solid #DBDBDB; }
.course__create--attach-info                { display: inline-flex; justify-content: center; align-items: center; }
.course__create--attach-name                { font-size: 18px; font-weight: 600; color: #222222; }
.course__create--attach-append              { padding: 0.25rem 0.5rem; background: #FFFFFF; border-radius: 0.25rem; border: 1px solid #DBDBDB; display: inline-flex; justify-content: center; align-items: center; gap: 0.25rem; font-size: 14px; cursor: pointer; }
.course__create--attach-file                { display: none; width: 0; height: 0; }
.course__create--attach-contents            { width: 100%; display: flex; flex-wrap: wrap; gap: 1rem; }
.course__create--attach-item                { padding: 0.5rem 0.75rem; position: relative; width: fit-content; display: inline-flex; justify-content: space-between; align-items: center; gap: 0.5rem; border: 1px solid #E5E5E5; border-radius: 0.5rem; background: #FFFFFF; }
.course__create--file-name                  { display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; font-size: 14px; font-weight: 400; cursor: pointer; }
.course__create--file-name::before          { content: '📝'; }
.course__create--file-delete                { font-size: 14px; font-weight: 400; cursor: pointer; }
.course__create--period                     { padding: 0.5rem 0; width: 100%; display: flex; justify-content: space-around; align-items: center; gap: 0.5rem; }
.course__create--period-item                { display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; }
.course__create--period-item input          { width: 18px; height: 18px; }
.course__create--period-item span           { font-size: 15px; font-weight: 500; color: #222222; }
.course__create--date-item                  { width: 100%; display: none; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; }
.course__create--date-item input            { padding: 0.25rem 0.5rem; width: 100%; outline: none; border: 1px solid #DBDBDB; border-radius: 0.5rem; }
.course__create--date-item span             { font-size: 15px; font-weight: 500; color: #222222; }
.course__create--method                     { padding: 0.5rem 0; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; }
.course__create--method-item                { display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; }
.course__create--method-item input          { width: 18px; height: 16px; }
.course__create--method-item span           { font-size: 15px; font-weight: 500; color: #222222; }
.course__create--category                   { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1rem; }
.course__create--category-item              { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; }
.course__create--category-title             { font-size: 15px; font-weight: 400; color: #222222; }
.course__create--category-selector          { padding: 0.25rem 0.5rem; width: 100%; outline: none; border-radius: 0.25rem; border: 1px solid #DBDBDB; }
.course__create--subject                    { width: 100%; }
.course__create--subject-selector           { padding: 0.25rem 0.5rem; width: 100%; outline: none; border-radius: 0.25rem; border: 1px solid #DBDBDB; }
.course__create--type                       { padding: 0.5rem 0; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; }
.course__create--type-item                  { display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; }
.course__create--type-item input            { width: 18px; height: 16px; }
.course__create--type-help                  { padding: 0.125rem 0.125rem; font-size: 10px; border-radius: 0.25rem; border: 1px solid #DBDBDB; }
.course__create--force                       { padding: 0.5rem 0; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; }
.course__create--force-item                  { display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; }
.course__create--force-item input            { width: 18px; height: 16px; }
.course__create--force-help                  { padding: 0.125rem 0.125rem; font-size: 10px; border-radius: 0.25rem; border: 1px solid #DBDBDB; }
.manager__teacher--option-text              { font-size: 14px; font-weight: 500; color: #828282; }

.course__edit--main                { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-content: flex-start; gap: 2rem; background: #FFFFFF; border-radius: 0.5rem; }
.course__edit--thumbnail-wrapper   { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1rem; }
.course__edit--thumbnail-header    { padding-bottom: 0.5rem; width: 100%; display: flex; justify-content: flex-start; align-content: center; gap: 0.5rem; border-bottom: 1px solid #DBDBDB; }
.course__edit--thumbnail-title     { font-size: 18px; font-weight: 600; color: #222222; }
.course__edit--thumbnail           { padding-top: 56%; position: relative; width: 100%; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 10px rgb(0 0 0 / 20%); border: 3px solid #FFFFFF; }
.course__edit--thumbnail img       { position: absolute; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.course__edit--thumbnail-file      { display: none; width: 0; height: 0; }
.course__edit--thumbnail-contents  { width: 100%; display: grid; grid-template-columns: 1fr 1.5fr; gap: 1rem; }
.course__edit--thumbnail-btn       { padding: 6px 10px; background: #FFFFFF; border-radius: 0.25rem; border: 1px solid #904AE8; display: inline-flex; justify-content: center; align-items: center; gap: 0.25rem; font-size: 14px; font-weight: 500; color: #904AE8; cursor: pointer; }
.course__edit--thumbnail-btn:hover { background: #904AE8; color: #FFFFFF; }
.course__edit--option-text    { font-size: 14px; font-weight: 500; color: #828282; line-height: 16px; }
.course__edit--side           { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1rem; }
.course__edit--title          { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.25rem; }
.course__edit--title-header   { width: 100%; display: flex; justify-content: flex-start; align-content: center; gap: 0.5rem; }
.course__edit--title-name     { font-size: 18px; font-weight: 600; color: #222222; }
.course__edit--title-contents { width: 100%; display: flex; justify-content: center; align-content: center; border-radius: 0.25rem; border: 1px solid #ced4da; overflow: hidden; }
.course__edit--title-input    { padding: 6px 10px; width: 100%; outline: none; border: none; font-size: 14px; font-weight: 400; background: #FFFFFF; }
.course__edit--title-btn      { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; padding: 0.25rem 0.75rem; white-space: nowrap; border: 1px solid #904AE8; background: #FFFFFF; cursor: pointer; }
.course__edit--title-btn span { font-size: 14px; font-weight: 400; color: #904AE8; }
.course__edit--option { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1rem; overflow: hidden; }
.course__edit--option-item { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; overflow: hidden; gap: 0; border-radius: 0.5rem; border: 1px solid #DBDBDB; flex-shrink: 0; }
.course__edit--option-header { padding: 0.5rem 0.75rem; width: 100%; display: flex; justify-content: flex-start; align-items: center; background: #F9FAFB; border-bottom: 1px solid #DBDBDB; }
.course__edit--option-title { font-size: 15px; font-weight: 600; color: #222222; }
.course__edit--option-contents { padding: 0.5rem 0.75rem; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; background: #FFFFFF; }
.course__edit--option-function { width: 100%; display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; }
.course__edit--option-btn { padding: 0.25rem 0.75rem; border-radius: 0.25rem; white-space: nowrap; border: 1px solid #904AE8; background: #FFFFFF; cursor: pointer; }
.course__edit--option-btn span { font-size: 14px; font-weight: 400; color: #904AE8; }
.course__edit--description { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; }
.course__edit--description-header { padding-bottom: 0.5rem; width: 100%; display: flex; justify-content: flex-start; align-content: center; gap: 0.5rem; border-bottom: 1px solid #DBDBDB; }
.course__edit--description-name { font-size: 18px; font-weight: 600; color: #222222; }
.course__edit--description-contents { width: 100%; height: 270px; overflow: hidden; }
.course__edit--description-function { width: 100%; display: flex; justify-content: flex-end; align-items: center; }
.course__edit--description-btn { padding: 0.25rem 0.75rem; border-radius: 0.25rem; white-space: nowrap; border: 1px solid #904AE8; background: #FFFFFF; cursor: pointer; }
.course__edit--description-btn span { font-size: 14px; font-weight: 400; color: #904AE8; }
.course__edit--period { padding: 0.5rem 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; }
.course__edit--period-item { display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; }
.course__edit--period-item input { width: 18px; height: 18px; }
.course__edit--period-item span { font-size: 15px; font-weight: 500; color: #222222; }
.course__edit--date-item { width: 100%; display: none; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; }
.course__edit--date-item input { padding: 0.25rem 0.5rem; width: 100%; outline: none; border: 1px solid #DBDBDB; border-radius: 0.5rem; }
.course__edit--date-item span { font-size: 15px; font-weight: 500; color: #222222; }
.course__edit--method { padding: 0.5rem 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; }
.course__edit--method-item { display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; }
.course__edit--method-item input { width: 18px; height: 15px; }
.course__edit--method-item span { font-size: 15px; font-weight: 500; color: #222222; }
.course__edit--category { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1rem; }
.course__edit--category-item { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; }
.course__edit--category-title { font-size: 15px; font-weight: 400; color: #222222; }
.course__edit--category-selector { padding: 0.25rem 0.5rem; width: 100%; outline: none; border-radius: 0.25rem; border: 1px solid #DBDBDB; font-size: 14px; }
.course__edit--subject { width: 100%; }
.course__edit--subject-selector { padding: 0.25rem 0.5rem; width: 100%; outline: none; border-radius: 0.25rem; border: 1px solid #DBDBDB; }
.course__edit--type { padding: 0.5rem 0; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; }
.course__edit--type-item { display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; }
.course__edit--type-item input { width: 18px; height: 15px; }
.course__edit--type-help { padding: 0.125rem 0.125rem; position: relative; font-size: 10px; border-radius: 0.25rem; border: 1px solid #DBDBDB; }
.course__edit--type-help p { padding: 0.5rem; position: absolute; z-index: 15; left: 50%; top: 100%; width: 200px; display: none; background: #222222; color: #FFFFFF; border-radius: 0.25rem; border: 1px solid #DBDBDB; font-size: 12px; transform: translateX(-50%); }
.course__edit--force-help { padding: 0.125rem 0.125rem; position: relative; font-size: 10px; border-radius: 0.25rem; border: 1px solid #DBDBDB; }
.course__edit--force-help p { padding: 0.5rem; position: absolute; z-index: 15; left: 50%; top: 100%; width: 200px; display: none; background: #222222; color: #FFFFFF; border-radius: 0.25rem; border: 1px solid #DBDBDB; font-size: 12px; transform: translateX(-50%); }

.course__edit--title-btn:hover { background: #904AE8; }
.course__edit--title-btn:hover span { color: #FFFFFF; }
.course__edit--type-help:hover p { display: block; }
.course__edit--force-help:hover p { display: block; }
.course__edit--option-btn:hover { background: #904AE8; }
.course__edit--option-btn:hover span { color: #FFFFFF; }
.course__edit--description-btn:hover { background: #904AE8; }
.course__edit--description-btn:hover span { color: #FFFFFF; }

.me__content--edit          { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 30px; }
.me__content--edit-header   { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.me__content--title         { font-size: 32px; font-weight: 700; color: #222222; }
.me__content--edit-side     { display: inline-flex; align-items: center; gap: 10px; }
.me__content--edit-cancel   { padding: 8px 25px; display: inline-flex; align-items: center; gap: 4px; border-radius: 30px; overflow: hidden; color: #FFFFFF; background: #904AE8; cursor: pointer; }
.me__content--edit-contents { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; }

/* 이름 수정 */
.content__edit--header                 { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.content__edit--title                  { font-size: 20px; font-weight: 600; color: #222222; }
.content__edit--header-side            { display: inline-flex; justify-content: center; align-items: center; gap: 10px; }
.content__edit--header-text            { font-weight: 400; }
.content__edit--header-text strong     { font-weight: 400; color: #904AE8; }
.content__edit--header-description     { font-size: 14px; font-weight: 400; }
.content__edit--order                  { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.content__edit--order-button           { aspect-ratio: 1 / 1; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; border: 1px solid #DBDBDB; user-select: none; cursor: pointer; }
.content__edit--order-button:hover     { border: 1px solid #904AE8; }
.content__edit--order-button:hover img { filter: brightness(0) saturate(100%) invert(33%) sepia(72%) saturate(4044%) hue-rotate(252deg) brightness(96%) contrast(88%); }
.content__edit--button                 { padding: 4px 8px; display: inline-flex; justify-content: center; align-items: center; background: #FFFFFF; border: 1px solid #DBDBDB; border-radius: 5px; cursor: pointer; }
.content__edit--button span            { font-size: 14px; font-weight: 400; }
.content__edit--contents               { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0; }
.content__edit--column                 { padding: 1rem 0; width: 100%; display: grid; grid-template-columns: 36px 104px 1fr 100px 100px 50px; gap: 14px; place-items: center; border-top: 1px solid #000000; border-bottom: 1px solid #000000; }
.content__edit--list                   { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0; }
.content__edit--item                   { padding: 1rem 0; width: 100%; display: grid; grid-template-columns: 36px 104px 1fr 100px 100px 50px; gap: 14px; place-items: center; background: #FFFFFF; border-bottom: 1px solid #DBDBDB; }
.content__edit--item.dragging          { background: #F5F2FB; box-shadow: 0px 4px 4px 0px #0000000D; cursor: grabbing; position: absolute; z-index: 1000; }
.content__edit--item.dragging
.content__edit--item-slot              { width: 24px; height: 24px; background: #FFFFFF; }
.content__edit--item-slot              { border-radius: 4px; background: #FFFFFF; cursor: grab; }
.content__edit--item-slot:hover        { background: #F5F2FB; }
.content__edit--item-thumbnail         { padding-top: 56%; position: relative; width: 100%; border: 2px solid #FFFFFF; box-shadow: 0 0 5px rgb(0 0 0 / 10%); overflow: hidden; cursor: pointer; }
.content__edit--item-thumbnail:hover
.content__edit--item-hover             { display: flex; }
.content__edit--item-thumbnail img     { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.content__edit--item-hover             { position: absolute; left: 0; top: 0; z-index: 15; width: 100%; height: 100%; display: none; justify-content: center; align-items: center; font-size: 14px; font-weight: 400; color: #FFFFFF; background: rgba(0, 0, 0, 0.5); }
.content__edit--item-file              { display: none; width: 0; height: 0; }
.content__edit--item-title             { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 0.25rem; }
.content__edit--item-title input       { padding: 6px 4px; width: 100%; background: #FFFFFF; border: 1px solid #904AE8; border-radius: 2px; }
.content__edit--item-title p           { padding: 6px 4px; width: 100%; background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 2px; }
.content__edit--item-title div         { width: 100%; display: grid; grid-template-columns: 1fr 20px 20px; place-items: center; gap: 5px; }
.content__edit--item-date              { font-size: 14px; font-weight: 400; color: #AAAAAA; }
.content__edit--item-function          { position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 0.25rem; }
.content__edit--item-button            { padding: 4px 8px; display: inline-flex; justify-content: center; align-items: center; background: #FFFFFF; border: 1px solid #DBDBDB; border-radius: 5px; cursor: pointer; }
.content__edit--item-button span       { font-size: 14px; font-weight: 400; }
.content__edit--item-button span strong { font-weight: 400; color: #904AE8; }
.content__edit--attach                 { position: absolute; right: 0; top: 100%; z-index: 20; width: 402px; display: none; grid-template-columns: 1fr; grid-template-rows: 1fr auto; place-items: flex-start; gap: 0; overflow: hidden; background: #FFFFFF; border: 1px solid #DBDBDB; border-radius: 5px; box-shadow: 0px 0px 10px 0px #0000001A; }
.content__edit--attach.active          { display: grid; }
.content__edit--attach-contents        { padding: 10px 20px; width: 100%; min-height: 200px; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; place-items: flex-start; gap: 0; overflow: hidden; }
.content__edit--attach-contents:not(:has(div)):after { content: '등록된 첨부파일이 없습니다.'; }
.content__edit--attach-item            { padding: 5px 0; width: 100%; display: grid; grid-template-columns: 1fr 46px; place-items: center flex-start; gap: 26px; overflow: hidden; }
.content__edit--attach-item span       { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; cursor: pointer; }
.content__edit--attach-item span:hover { text-decoration: underline; }
.content__edit--attach-item button     { padding: 4px 8px; display: inline-flex; justify-content: center; align-items: center; background: #FFFFFF; border: 1px solid #DBDBDB; border-radius: 5px; cursor: pointer; }
.content__edit--attach-function        { padding: 14px 18px; width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; background: #F5F2FB; }
.content__edit--attach-button          { padding: 4px 8px; display: inline-flex; justify-content: center; align-items: center; gap: 4px; background: #FFFFFF; border: 1px solid #DBDBDB; border-radius: 5px; cursor: pointer; }
.content__edit--attach-button img      { width: 20px; }
.content__edit--attach-button span     { font-size: 14px; font-weight: 400; }
.content__edit--attach-file            { display: none; }
.content__edit--item-attach            { position: relative; width: 100%; }
.content__edit--item-attach
.content__edit--item-button:hover      { background: #F5F2FB; border: 1px solid #904AE8; }
.content__edit--item-attach
.content__edit--item-button:hover *    { color: #904AE8; }
.content__edit--item-attach
.content__edit--item-button:active     { background: #F5F2FB; border: 1px solid #904AE8; }
.content__edit--item-attach
.content__edit--item-button:active *   { color: #904AE8; }
.content__edit--item-menu              { padding: 10px 20px; position: absolute; z-index: 10; left: 50%; top: 50%; display: none; grid-template-columns: 1fr; place-items: flex-start; gap: 5px; background: #FFFFFF; border: 1px solid #DBDBDB; box-shadow: 0px 0px 10px 0px #0000001A; }
.content__edit--item-menu.active       { display: grid; }
.content__edit--item-menu > *          { white-space: nowrap; }
.content__edit--item-menu > *:hover    { text-decoration: underline; }
.content__edit--item-share             { width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 10px; overflow: hidden; }
.content__edit--share                  { padding: 0.75rem; position: absolute; right: 0; top: calc(100% + 1rem); z-index: 10; background: #FFFFFF; border: 1px solid rgba(0,0,0,.15); border-radius: 0.5rem; display: none; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.25rem; cursor: default; }
.content__edit--share-input            { padding: 0.25rem 0.5rem; width: 100%; background: #E9ECEF; border-radius: 0.25rem; }
.content__edit--share-contents         { padding: 0 0.25rem; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.content__edit--share-side             { display: inline-flex; justify-content: center; align-items: center; gap: 0.25rem; white-space: nowrap; font-size: 14px; }
.content__edit--share-side:first-child { font-size: 14px; font-weight: 400; }
.content__edit--share-refresh          { padding: 0.25rem 0.5rem; border-radius: 0.25rem; border: 1px solid #904AE8; background: #904AE8; color: #FFFFFF !important; font-size: 14px; cursor: pointer; }
.content__edit--share-cancel,
.content__edit--share-copy             { padding: 0.25rem 0.5rem; border-radius: 0.25rem; border: 1px solid #DBDBDB; display: inline-flex; justify-content: center; align-items: center; gap: 0.25rem; font-size: 14px; cursor: pointer; }
.content__edit--tooltip                { padding: 0.25rem 0; position: relative; display: flex; justify-content: flex-start; align-items: center; font-size: 12px; }
.content__edit--tooltip:hover
.content__edit--tooltip-text           { display: block; }
.content__edit--tooltip-text           { padding: 0.25rem; display: none; position: absolute; z-index: 15; top: 100%; left: 0; width: 250px; word-break: break-word; background: #222222; border-radius: 0.25rem; border: 1px solid #DBDBDB; font-size: 14px; color: #FFFFFF; }
.content__edit--cms                    { padding: 20px; position: fixed; left: 0; top: 0; z-index: 50; width: 100%; height: 100vh; display: none; justify-content: center; align-items: center; overflow-y: auto; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); }
.content__edit--cms.active             { display: flex; }
.content__edit--cms-container          { margin: auto; width: 100%; max-width: 1200px; min-height: 600px; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; border-radius: 6px; background: #FFFFFF; overflow: hidden; }
.content__edit--cms-header             { padding: 20px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid #DBDBDB; }
.content__edit--cms-title              { font-size: 20px; font-weight: 700; color: #222222; }
.content__edit--cms-cancel             { width: 14px; cursor: pointer; user-select: none; }
.content__edit--cms-contents           { position: relative; width: 100%; min-height: 70vh; height: 100%; overflow: hidden; }

.common__course--modal { padding: 20px; position: fixed; left: 0; top: 0; z-index: 50; width: 100%; height: 100vh; display: none; justify-content: center; align-items: center; overflow-y: auto; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); }
.common__course--modal.active { display: flex; }
.common__course--container { margin: auto; min-width: 500px; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; border-radius: 6px; background: #FFFFFF; overflow: hidden; }
.common__course--header { padding: 20px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid #DBDBDB; }
.common__course--title { font-size: 20px; font-weight: 700; color: #222222; }
.common__course--cancel { width: 14px; cursor: pointer; user-select: none; }
.common__course--contents { padding: 20px; position: relative; width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; place-items: center; gap: 10px; overflow: hidden; }
.common__course--item { width: 100%; display: grid; grid-template-columns: 2fr 8fr; place-items: center flex-start; gap: 10px; overflow: hidden; }
.common__course--item-title { font-size: 16px; font-weight: 500; color: #222222; }
.common__course--item-input { padding: 10px; width: 100%; background-color: #FFFFFF;border: 1px solid #AAAAAA; border-radius: 4px; font-size: 14px; }
.common__course--button { padding: 6px 8px; width: min-content; display: inline-flex; align-items: center; gap: 4px; background: #904AE8; border-radius: 4px; white-space: nowrap; font-size: 16px; font-weight: 500; color: #FFFFFF; cursor: pointer; user-select: none; }

.me__progress--modal { padding: 0 1.25rem; position: fixed; left: 0; top: 0; z-index: 35; width: 100%; height: 100vh; display: none; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1px); }
.me__progress--modal-container { padding: 1.25rem; position: relative; max-width: 1200px; width: 100%; background: #FFFFFF; border-radius: 0.625rem; }
.me__progress--modal-cancel { position: absolute; right: 1.25rem; top: 1.25rem; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.me__progress--wrapper { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1.25rem; }
.me__progress--column { padding: 1.25rem; width: 100%; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; column-gap: 0.625rem; border-bottom: 1px solid #222222; }
.me__progress--column-item { width: 100%; text-align: center; }
.me__progress--column-item p { font-size: 1.125rem; font-weight: 600; color: #222222; }
.me__progress--contents { width: 100%; max-height: 50vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1.25rem; overflow-y: auto; }
.me__progress--contents-list { padding: 0.5rem 1.25rem; width: 100%; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; column-gap: 0.625rem;  }
.me__progress--contents-item { width: 100%; max-width: 100%; overflow: hidden; text-align: center; }
.me__progress--contents-text { width: 100%; font-size: 15px; font-weight: 400; color: #222222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me__progress--contents-link { width: 100%; font-size: 15px; font-weight: 400; color: #222222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me__progress--contents-link:hover { text-decoration: underline; cursor: pointer; user-select: none; }
.me__progress--contents-status { display: inline-flex; justify-content: center; align-items: center; gap: 4px; }
.me__progress--contents-icon { width: 18px; }
.me__progress--contents-now { font-size: 14px; font-weight: 400; }
.me__progress--none { width: 100%; height: 200px; display: flex; justify-content: center; align-items: center; }
.me__progress--none-title { font-size: 1.25rem; font-weight: 400; color: #222222; }
.me__progress--tooltip { font-size: 14px; font-weight: 400; color: #904AE8; }
.me__progress--contents-status.before .me__progress--contents-now { color: #828282; }
.me__progress--contents-status.progress .me__progress--contents-now { color: #904AE8; }
.me__progress--contents-status.done .me__progress--contents-now { color: #FF6868; }
.me__progress--column-item:first-child { text-align: left; }
.me__progress--contents-item:first-child { text-align: left; }
.me__progress--contents-item:first-child .progress__student--contents-text { cursor: pointer; }
.me__progress--contents-item:first-child .progress__student--contents-text:hover { color: #904AE8; }
.me__progress--modal-container .progress__student--contents { max-height: 40vh; overflow-y: auto; }

.me__post                   { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; gap: 30px; }
.me__post--header           { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.me__post--header-side      { display: inline-flex; align-items: center; gap: 10px; }
.me__post--title            { font-size: 32px; font-weight: 700; color: #222222; }
.me__post--none             { width: 100%; height: 160px; border-radius: 10px; border: 1px dashed #904AE8; display: none; justify-content: center; align-items: center; }
.me__post--none-text        { font-size: 18px; font-weight: 400; color: #222222; text-align: center; line-height: 24px; }
.me__post--none-text a      { font-size: 18px; font-weight: 400; color: #904AE8; text-decoration: underline; cursor: pointer; }
.me__post--lesson           { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 0; }
.me__post--item             { padding: 18px 20px 18px 10px; width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 10px; overflow: hidden; border-radius: 10px; }
.me__post--item-info        { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; overflow: hidden; }
.me__post--item-side        { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 8px; overflow: hidden; }
.me__post--item-text        { font-size: 16px; font-weight: 400; color: #828282; }
.me__post--item-course      { white-space: nowrap; font-size: 16px; font-weight: 400; color: #828282; cursor: pointer; }
.me__post--item-title       { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 400; color: #222222; cursor: pointer; }
.me__post--item-icon        { width: 24px; }
.me__post--item-detail      { display: inline-flex; justify-content: center; align-items: center; gap: 4px; }
.me__post--item-detail img  { width: 14px; }
.me__post--item-detail span { font-size: 14px; font-weight: 400; color: #828282; }
.me__post--item-count       { display: inline-flex; justify-content: center; align-items: center; gap: 4px; }
.me__post--item-count img   { width: 50px; }
.me__post--item-count span  { font-size: 18px; font-weight: 400; color: #828282; }
.me__post--item:hover       { background: #F5F2FB; }
.me__post--item-title:hover { color: #904AE8; }

.me__account                      { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 30px; }
.me__account--header              { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.me__account--side                { display: inline-flex; justify-content: center; align-items: center; gap: 10px; }
.me__account--title               { font-size: 32px; font-weight: 700; color: #222222; }
.me__account--contents            { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; }
.me__account--inline              { width: 100%; display: grid; grid-template-columns: 1fr 1.5fr 1.5fr; gap: 20px; overflow: hidden; }
.me__account--item                { padding: 16px 0; position: relative; width: 100%; display: grid; grid-template-columns: 120px auto; gap: 54px; place-items: center flex-start; border-bottom: 1px solid #222222; overflow: hidden; }
.me__account--item-title          { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; font-weight: 400; color: #222222; }
.me__account--item-contents       { width: 100%; display: inline-flex; justify-content: flex-start; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; font-weight: 400; color: #AAAAAA; }
.me__account--item-contents.edit  { color: #222222; }
.me__account--item-input          { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; font-weight: 400; color: #222222; }
.me__account--item-btn            { padding: 6px 4px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-flex; justify-content: center; align-items: center; gap: 4px; border-radius: 6px; border: 1px solid #DBDBDB; background: #FFFFFF; cursor: pointer; }
.me__account--item-btn img        { width: 20px; }
.me__account--item-btn span       { font-size: 14px; font-weight: 400; color: #222222; }
.me__account--password-visible    { position: absolute; right: 0; top: 50%; transform: translateY(-50%); cursor: pointer; }
.me__account--desc                { width: 100%; overflow: hidden; }
.me__account--func                { width: 100%; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.me__account--func-submit         { padding: 6px 15px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; border: 1px solid #904AE8; border-radius: 30px; overflow: hidden; background: #904AE8; cursor: pointer; }
.me__account--func-submit img     { width: 24px; }
.me__account--func-submit span    { font-size: 16px; font-weight: 400; color: #FFFFFF; }
.me__account--func-cancel         { padding: 8px 25px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; border: 1px solid #904AE8; border-radius: 30px; overflow: hidden; cursor: pointer; }
.me__account--func-cancel span    { font-size: 16px; font-weight: 400; color: #904AE8; }
.me__account--mail-function       { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: none; justify-content: center; align-items: center; gap: 10px; }
.me__account--mail-function > div { padding: 6px 4px; display: inline-flex; justify-content: center; align-items: center; gap: 4px; border-radius: 6px; border: 1px solid #DBDBDB; background: #FFFFFF; cursor: pointer; }
.me__account--mail-send.disabled  { background: #828282; color: #FFFFFF; }
.me__account--profile-btn         { padding: 6px 4px; display: inline-flex; justify-content: center; align-items: center; gap: 4px; border-radius: 6px; border: 1px solid #904AE8; background: #904AE8; cursor: pointer; align-self: flex-end; }
.me__account--profile-btn img     { width: 20px; }
.me__account--profile-btn span    { font-size: 14px; font-weight: 400; color: #FFFFFF; }
.me__account--edit                { padding: 16px 0; position: relative; width: 100%; display: grid; grid-template-columns: min-content 1fr; gap: 20px; place-items: center flex-start; border-bottom: 1px solid #222222; }
.me__account--edit-btn            { padding: 6px 8px; display: inline-flex; align-items: center; gap: 4px; color: #FFFFFF; background: #904AE8; border-radius: 4px; border: 1px solid #904AE8; cursor: pointer; }
.me__account--edit-btn img        { width: 14px; height: 14px; }
.me__account--edit-btn span       { white-space: nowrap; font-size: 14px; font-weight: 400; color: #FFFFFF; }
.me__account--edit-input          { height: min-content; font-size: 18px; }
.me__account--item-birthdate      { width: 100%; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 4px; }

.me__rate              { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 30px; }
.me__rate--header      { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.me__rate--header-side { display: inline-flex; align-items: center; gap: 10px; }
.me__rate--title       { font-size: 32px; font-weight: 700; color: #222222; }
.me__rate--contents    { width: 100%; height: inherit; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 1rem; background: #FFFFFF; overflow: hidden; }

/* 이름 수정 */
.progress__teacher--align { display: inline-flex; justify-content: center; align-items: center; }
.progress__teacher--align-item { margin: 0 0.25rem; padding: 0 0.75rem; position: relative; cursor: pointer; }
.progress__teacher--align-item img { position: absolute; z-index: 4; left: 0; top: 50%; width: 0; height: 10px; transform-origin: left ; }
.progress__teacher--align-item svg { position: absolute; z-index: 4; left: 0; top: 50%; width: 0; height: 10px; transform-origin: left ; }
.progress__teacher--align-item p { position: relative; z-index: 5; font-size: 18px; font-weight: 400; color: #222222; }
.progress__teacher--align-item:first-child {  border-right: 1px solid #222222; }
.progress__teacher--align-item:nth-child(2) { margin: 0; }
.progress__teacher--align-item:last-child {  border-left: 1px solid #222222; }
.progress__teacher--align-item:hover p { color: #904AE8; }
.progress__teacher--align-item:active svg { transition: all 300ms ease-out; width: 100%; height: 10px; }
.progress__teacher--align-item:active p { color: #904AE8; }
.progress__teacher--align-item.active svg { transition: all 300ms ease-out; width: 100%; height: 10px; }
.progress__teacher--align-item.active p { color: #904AE8; }
.progress__teacher--courses { padding: 1.875rem; width: 100%; height: 250px; border-radius: 0.625rem; background: #FFFFFF; border: 1px solid #DBDBDB; }
.progress__teacher--courses-none { position: relative; width: 100%; height: 100%; display: none; justify-content: center; align-items: center; }
.progress__teacher--courses-none p { font-size: 1.25rem; font-weight: 600; color: #828282; }
.progress__teacher--courses-wrapper { width: 100%; max-height: 100%; display: inline-flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; column-gap: 1.15rem; row-gap: 1.25rem; overflow-y: auto; }
.progress__teacher--courses-wrapper::-webkit-scrollbar { width: 5px; }
.progress__teacher--courses-wrapper::-webkit-scrollbar-thumb { background: #904AE8; border-radius: 0.5rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.progress__teacher--courses-wrapper::-webkit-scrollbar-track { background: #CCCCCC; border-radius: 0.5rem; }
.progress__teacher--courses-mob { padding: 0.625rem 1rem; display: none; width: 100%; border-radius: 0.25rem; border: 1px solid #DBDBDB; }
.progress__teacher--courses-item { padding: 0.5rem 1.25rem; display: inline-flex; justify-content: center; align-items: center; column-gap: 0.5rem; background: #FFFFFF; border-radius: 1.875rem; border: 1px solid #904AE8; cursor: pointer; }
.progress__teacher--courses-text { font-size: 15px; font-weight: 400; color: #904AE8; }
.progress__teacher--courses-lecture { padding: 0.25rem 0.5rem; font-size: 0.875rem; font-weight: 400; color: #904AE8; border: 1px solid #904AE8; border-radius: 1rem; }
.progress__teacher--courses-item:hover { background: #F5F2FB; }
.progress__teacher--courses-item.active { background: #904AE8; }
.progress__teacher--courses-item.active .progress__teacher--courses-text { color: #FFFFFF; }
.progress__teacher--courses-item.active .progress__teacher--courses-lecture { background: #6125AC; color: #FFFFFF; }
.progress__teacher--contents { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 1rem; overflow: hidden; }
.progress__teacher--contents-header { padding: 0 0.75rem; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.progress__teacher--course-title { display: inline-flex; justify-content: flex-start; align-items: center; column-gap: 0.25rem; }
.progress__teacher--course-title p { white-space: pre; font-size: 18px; font-weight: 400; color: #222222; }
.progress__teacher--course-info { display: inline-flex; justify-content: center; align-items: center; column-gap: 1.25rem; }
.progress__teacher--course-info p { white-space: pre; font-size: 15px; font-weight: 400; color: #828282; }
.progress__teacher--course-info div { display: inline-flex; justify-content: center; align-items: center; column-gap: 0.5rem; }
.progress__teacher--course-button { padding: 8px; display: inline-flex; justify-content: center; align-items: center; gap: 4px; border-radius: 4px; cursor: pointer; background: #904AE8; user-select: none; }
.progress__teacher--course-button img { width: 16px; }
.progress__teacher--course-button span { font-size: 12px; font-weight: 500; color: #FFFFFF; }
.progress__teacher--wrapper { width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.progress__teacher--none { width: 100%; height: 200px; display: none; justify-content: center; align-items: center; }
.progress__teacher--none-text { font-size: 1.25rem; font-weight: 600; color: #828282; }
.progress__teacher--order { padding: 1.25rem; width: 100%; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 0.5fr; column-gap: 2rem; border-top: 1px solid #222222; border-bottom: 1px solid #222222; }
.progress__teacher--order-item { display: inline-flex; justify-content: center; align-items: center; }
.progress__teacher--order-item > p { white-space: pre; font-size: 18px; font-weight: 400; color: #222222; }
.progress__teacher--order-item > div { cursor: pointer; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; }
.progress__teacher--order-item:first-child { display: flex; justify-content: center; align-items: center; }
.progress__teacher--order-align { padding: 2px 12px; position: relative; display: flex; justify-content: center; align-items: center; }
.progress__teacher--order-align:first-child:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: calc(100% + 20px); cursor: pointer; }
.progress__teacher--order-align:last-child:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 20px); cursor: pointer; }
.progress__teacher--order-align svg path { fill: #DBDBDB; }
.progress__teacher--order-align:hover svg path { fill: #222222; }
.progress__teacher--order-align.active svg path { fill: #222222; }
.progress__teacher--select-all { width: 24px; height: 24px; }
.progress__teacher--list { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0; overflow-y: auto; }
.progress__teacher--list-item { padding: 1.25rem; position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 0.5fr; column-gap: 2rem; border-bottom: 1px solid #DBDBDB; transition: 300ms ease-out; }
.progress__teacher--list-select { width: 24px; height: 24px; }
.progress__teacher--list-column { display: flex; justify-content: center; align-items: center; }
.progress__teacher--list-column:first-child { display: flex; justify-content: flex-start; align-items: center; column-gap: 0.5rem; }
.progress__teacher--list-column:nth-child(2) { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; column-gap: 0.5rem; row-gap: 0.625rem; }
.progress__teacher--list-column:nth-child(3) { display: flex; justify-content: center; align-items: center; }
.progress__teacher--list-student { position: relative; width: 48px; height: 48px; overflow: hidden; border-radius: 50%; }
.progress__teacher--list-student img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.progress__teacher--list-text { font-size: 15px; font-weight: 400; color: #828282; }
.progress__teacher--list-bar { position: relative; width: 100%; height: 5px; display: flex; justify-content: flex-start; align-items: center; background: rgba(255, 104, 104, 0.3); border-radius: 0.5rem; }
.progress__teacher--list-bar div { width: 50%; height: 100%; border-radius: 0.5rem; background: #FF6868; }
.progress__teacher--list-item:hover { z-index: 5; }
.progress__teacher--list-btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; font-weight: 400; color: #FFFFFF; background: #904AE8; border-radius: 0.25rem; cursor: pointer; }
.progress__teacher--pagination { margin-top: 50px; width: 100%; display: flex; justify-content: center; align-items: center; column-gap: 0.625rem; }
.progress__teacher--pagination-item { width: 30px; height: 30px; border-radius: 0.25rem; background: transparent; display: flex; justify-content: center; align-items: center; cursor: pointer; font-family: 'Montserrat', sans-serif; font-weight: 400; color: #222222; }
.progress__teacher--pagination-item:hover { background: #904AE8; color: #FFFFFF; }
.progress__teacher--pagination-item:hover svg path { fill: #FFFFFF; }
.progress__teacher--pagination-item.active { background: #904AE8; color: #FFFFFF; }
.progress__teacher--pagination-item.active svg path { fill: #FFFFFF; }
.progress__teacher--modal { padding: 0 1.25rem; position: fixed; left: 0; top: 0; z-index: 30; width: 100%; height: 100vh; display: none; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1px); }
.progress__teacher--modal-container { padding: 1.25rem; position: relative; max-width: 850px; width: 100%; background: #FFFFFF; border-radius: 0.625rem; }
.progress__teacher--modal-cancel { position: absolute; right: 1.25rem; top: 1.25rem; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.progress__teacher--modal-container .progress__student--contents { max-height: 40vh; overflow-y: auto; }
.progress__student--wrapper { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1.25rem; }
.progress__student--column { padding: 1.25rem; width: 100%; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; column-gap: 0.625rem; border-bottom: 1px solid #222222; }
.progress__student--column-item { width: 100%; text-align: center; }
.progress__student--column-item p { font-size: 1.125rem; font-weight: 600; color: #222222; }
.progress__student--column-item:first-child { text-align: left; }
.progress__student--contents { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1.25rem; }
.progress__student--contents-list { padding: 0.5rem 1.25rem; width: 100%; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; column-gap: 0.625rem;  }
.progress__student--contents-item { width: 100%; max-width: 100%; overflow: hidden; text-align: center; }
.progress__student--contents-item:first-child { text-align: left; }
.progress__student--contents-item:first-child .progress__student--contents-text { cursor: pointer; }
.progress__student--contents-item:first-child .progress__student--contents-text:hover { color: #904AE8; }
.progress__student--contents-text { width: 100%; font-size: 15px; font-weight: 400; color: #222222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress__student--contents-status { padding: 0.25rem 0.5rem; display: inline-flex; border-radius: 0.25rem; background: #f4008e; font-size: 0.875rem; font-weight: 400; color: #FFFFFF; }
.progress__student--contents-status.before { background: #f4008e; }
.progress__student--contents-status.during { background: #6125ac; }
.progress__student--contents-status.after { background: #904AE8; }
.progress__student--contents-status.other { background: #d00030; }
.progress__student--none { width: 100%; height: 200px; display: flex; justify-content: center; align-items: center; }
.progress__student--none-title { font-size: 1.25rem; font-weight: 400; color: #222222; }


.academy__course { margin-top: 60px; padding-bottom: 80px; width: 100%; min-height: 55vh; }
.academy__course--container { margin: 0 auto; max-width: 1200px; width: 100%; }
.academy__course--header { padding-bottom: 1.25rem; width: 100%; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #222222; }
.academy__course--hero { display: inline-flex; justify-content: flex-start; align-items: center; column-gap: 1.125rem; }
.academy__course--hero-title { font-size: 24px; font-weight: 700; color: var(--text1); }
.academy__course--hero-sub { font-size: 18px; font-weight: 400; color: var(--text1); }
.academy__course--align { display: inline-flex; justify-content: center; align-items: center; column-gap: 1rem; }
.academy__course--align-item { font-size: 18px; font-weight: 400; color: var(--text1); cursor: pointer; }
.academy__course--contents { padding-top: 1.875rem; width: 100%; }
.academy__course--contents-none { margin-top: 3.125rem; display: none; }
.academy__course--wrapper { width: 100%; height: min-content; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 36px; }

.academy__course--thumbnail.skeleton { width: 100%; height: 100%; border-radius: 0.25rem; background-color: #e2e5e7; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-size: 40px 100%; background-repeat: no-repeat; background-position: left -40px top 0; animation: shine 1s ease infinite; }
.academy__course--academy.skeleton { max-width: 100px; width: 100%; height: 25px; border-radius: 0.25rem; background-color: #e2e5e7; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-size: 40px 100%; background-repeat: no-repeat; background-position: left -40px top 0; animation: shine 1s ease infinite; }
.academy__course--title.skeleton { margin-top: 20px; max-width: 150px; width: 100%; height: 25px; border-radius: 0.25rem; background-color: #e2e5e7; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-size: 40px 100%; background-repeat: no-repeat; background-position: left -40px top 0; animation: shine 1s ease infinite; }
.academy__course--date.skeleton { margin-top: 10px; max-width: 100px; width: 100%; height: 25px; border-radius: 0.25rem; background-color: #e2e5e7; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-size: 40px 100%; background-repeat: no-repeat; background-position: left -40px top 0; animation: shine 1s ease infinite; }
.academy__course--info.skeleton { margin-top: 10px; max-width: 150px; width: 100%; height: 25px; border-radius: 0.25rem; background-color: #e2e5e7; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-size: 40px 100%; background-repeat: no-repeat; background-position: left -40px top 0; animation: shine 1s ease infinite; }

.search__course , .search__course * { margin: 0; padding: 0; list-style: none; text-decoration: none; }
.search__course { padding: 5rem 0; width: 100%; }
.search__course--container { margin: 0 auto; width: 1200px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.search__course--header { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.search__course--header-side { display: flex; justify-content: flex-start; align-items: center; column-gap: 1rem; }
.search__course--now { display: flex; justify-content: center; align-items: center; column-gap: 1rem; }
.search__course--now-item { padding: 0.625rem 1.25rem; position: relative; border-radius: 1.5rem; background: #904AE8; }
.search__course--now-item p { color: #FFFFFF; font-size: 16px; font-weight: 400; }
.search__course--now-cancel { position: absolute; right: 0; top: 0; transform: translate(50%, -50%); width: 28px; height: 28px; border-radius: 50%; display: flex; justify-content: center; align-items: center; text-align: center; background: #FFFFFF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); font-size: 0.875rem; cursor: pointer; }

.board__list , .board__list * { margin: 0; padding: 0; list-style: none; text-decoration: none; }
.board__list { padding-bottom: 100px; padding-top: 5rem; width: 100%; min-height: 60vh; }
.board__list--container { margin: 0 auto; max-width: 1200px; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.board__list--header { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; }
.board__list--title { font-size: 36px; font-weight: 700; color: #222222; }
.board__list--contents { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.board__list--column { padding: 1.25rem 0; width: 100%; display: grid; grid-template-columns: 1fr 4fr 1fr 1fr 1fr; column-gap: 3.125rem; place-items: center; border-bottom: 1px solid #222222; }
.board__list--column-item { font-size: 16px; font-weight: 400; color: #222222; }
.board__list--wrapper { margin-bottom: 1.75rem; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.board__list--item { padding: 1.125rem 0; width: 100%; display: grid; grid-template-columns: 1fr 4fr 1fr 1fr 1fr; column-gap: 3.125rem; border-bottom: 1px solid #DBDBDB; place-items: center; }
.board__list--item.fixed { background: #FAF8FE; }
.board__list--item.fixed > .board__list--item-text:nth-child(1) { margin: 0 auto; padding: 0.125rem 0.625rem; color: #904AE8; border-radius: 0.25rem; border: 1px solid #904AE8; }
.board__list--item.fixed > .board__list--item-text:nth-child(2) a { color: #904AE8; }
.board__list--item-text { transition: 150ms; font-size: 16px; font-weight: 400; color: #828282; text-align: center; width: auto; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.board__list--item-text:nth-child(2) { text-align: left; width: 100%; display: flex; justify-content: flex-start; align-items: center; column-gap: 0.5rem; place-items: center flex-start; }
.board__list--item-text:nth-child(4) { gap: 0.3rem; display: flex; align-items: center; }
.board__list--item-text:nth-child(2):hover span:first-child { color: #904AE8; }
.board__list--item-text .board__list--item-text {text-align: left; }
.board__list--item-count { font-size: 16px; font-weight: 400; color: #828282; text-align: center; width: auto; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.board__list--item-new { padding: 0.25rem 0.625rem; background: #FF6868; border-radius: 1rem; font-size: 12px; font-weight: 700; color: #FFFFFF; }
.board__list--write { padding: 0.5rem 1rem; display: flex; justify-content: center; align-items: center; column-gap: 0.5rem; border-radius: 0.25rem; background: #904AE8; cursor: pointer; }
.board__list--write p { font-size: 16px; font-weight: 400; color: #FFFFFF; }
.board__list--function { width: 100%; display: flex; justify-content: flex-end; align-items: center; }
.board__list--write-btn { padding: 0.5rem 0.625rem; position: relative; display: inline-flex; justify-content: center; align-items: center; column-gap: 0.5rem; border-radius: 0.25rem; border: 1px solid #DBDBDB; cursor: pointer; }
.board__list--write-btn svg { width: 18px; height: auto; }
.board__list--write-btn img { width: 18px; height: auto; }
.board__list--write-btn small { font-size: 16px; font-weight: 400; color: #222222; }
.board__list--write-btn:hover { border: 1px solid #904AE8; }
.board__list--write-btn:hover svg path { fill: #904AE8; }
.board__list--write-btn:hover small { color: #904AE8; }
.board__none { margin-top: 3.125rem; width: 100%; height: 300px; display: none; flex-direction: column; justify-content: center; align-items: center; }
.board__list--item-text:hover { color: #904AE8; }

.board__read , .board__read * { margin: 0; padding: 0; list-style: none; text-decoration: none; }
.board__read { margin: 0 auto; padding: 5rem 0; max-width: 1200px; width: 100%; min-height: 60vh; }
.board__read--container { margin: 0 auto; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.board__read--title { font-size: 36px; font-weight: 700; color: #222222; }
.board__read--info { margin-top: 35px; padding: 1.25rem; width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 10px; background: #F5F2FB; border-radius: 0.625rem; }
.board__read--info-side:first-child { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.625rem; }
.board__read--info-title { font-size: 24px; font-weight: 400; color: #222222; }
.board__read--info-box { display: flex; justify-content: flex-start; align-items: center; column-gap: 1rem; }
.board__read--info-date { font-size: 16px; font-weight: 400; color: #828282; }
.board__read--info-writer { display: flex; justify-content: flex-start; align-items: center; column-gap: 0.25rem; }
.board__read--info-writer p { font-size: 16px; font-weight: 400; color: #828282; }
.board__read--function { display: flex; justify-content: center; align-items: center; column-gap: 0.5rem; }
.board__read--function-item { padding: 0.25rem 0.5rem; display: flex; justify-content: center; align-items: center; column-gap: 0.625rem; border: 1px solid #DBDBDB; border-radius: 0.25rem; background: #FFFFFF; cursor: pointer; }
.board__read--function-item small { font-size: 16px; font-weight: 400; color: #222222; }
.board__read--contents { padding: 3.125rem 1.25rem !important; width: 100%; border-bottom: 1px solid #222222; }
.board__read--contents img { max-width: 100%; }
.board__read--contents p { font-size: 16px; font-weight: 400; color: #828282; line-height: 2.125rem; }
.board__read--footer { padding-top: 1.875rem; width: 100%; display: flex; justify-content: flex-end; align-items: center; }
.board__read--btn { padding: 0.5rem 0.5rem; display: flex; justify-content: center; align-items: center; column-gap: 0.25rem; border: 1px solid #DBDBDB; border-radius: 0.25rem; background: #FFFFFF; cursor: pointer; }
.board__read--btn p { font-size: 16px; font-weight: 400; color: #222222; }
.board__read--file { margin-top: 1rem; display: flex; justify-content: flex-start; align-items: center; column-gap: 0.5rem; row-gap: 0.5rem; }
.board__read--file-item { padding: 0.5rem 0.75rem; display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; border: 1px solid #E5E5E5; border-radius: 0.5rem; font-size: 14px; font-weight: 400; cursor: pointer; }
.board__read--file-item::before { content: '📝'; }
.board__read--comment { margin-top: 3.125rem; padding: 1.875rem 2rem; width: 100%; display: none; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1.875rem; background: #FFFFFF; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); border-radius: 0.625rem; }
.board__read--comment-header { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1.5rem; }
.board__read--comment-total { display: inline-flex; justify-content: flex-start; align-items: center; }
.board__read--comment-total strong { font-size: 18px; font-weight: 400; color: #904AE8; }
.board__read--comment-total small { font-size: 18px; font-weight: 400; color: #222222; }
.board__read--comment-write { padding: 0.625rem 1.125rem; width: 100%; min-height: 100px; display: flex; justify-content: space-between; align-items: center; column-gap: 1.25rem; border-radius: 0.25rem; border: 1px solid #E7E7E7; }
.board__read--comment-area {border: none; width: 100%; font-size: 16px; font-weight: 400; color: #222222; line-height: 1.625rem; }
.board__read--comment-function { display: inline-flex; justify-content: flex-end; align-items: center; column-gap: 0.625rem; }
.board__read--comment-done { padding: 0.375rem 0.625rem; display: flex; justify-content: center; align-items: center; column-gap: 0.25rem; border-radius: 0.25rem; font-size: 16px; font-weight: 600; color: #222222; border: 1px solid #DBDBDB; cursor: pointer; }
.board__read--comment-done img { width: 20px; height: auto; }
.board__read--comment-done svg { width: 20px; height: auto; }
.board__read--comment-done path { fill: #222222; }
.board__read--comment-done small { white-space: nowrap; font-size: 16px; font-weight: 400; color: #222222; }
.board__read--comment-contents { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1.875rem; }
.board__read--comment-item { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.board__read--comment-user { width: 100%; display: flex; justify-content: flex-start; align-items: center; column-gap: 0.625rem; }
.board__read--comment-picture { position: relative; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 1px solid #DBDBDB; }
.board__read--comment-picture img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.board__read--comment-side { display: inline-flex; justify-content: flex-start; align-items: center; gap: 4px; }
.board__read--comment-name { font-size: 16px; font-weight: 400; color: #222222; }
.board__read--comment-date { font-size: 0.875rem; font-weight: 400; color: #888888; }
.board__read--comment-info { padding-left: 3rem; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.5rem; }
.board__read--comment-text { width: 100%; font-size: 16px; font-weight: 400; color: #828282; line-height: 1.625rem; word-break: break-word; }
.board__read--comment-delete { cursor: pointer; }
.board__read--comment-delete img { width: 16px; height: auto; }
.board__read--comment-delete svg { width: 16px; height: auto; }
.board__read--comment-delete path { fill: #828282; }
.board__read--comment-detail { display: inline-flex; justify-content: flex-start; align-items: center; gap: 8px; }
.board__read--comment-return { display: none; justify-content: flex-start; align-items: center; gap: 4px; cursor: pointer; }
.board__read--comment-return img { width: 18px; height: auto; }
.board__read--comment-return svg { width: 18px; height: auto; }
.board__read--comment-return path { fill: #222222; }
.board__read--comment-return:hover path { fill: #904AE8; }
.board__read--comment-return:hover p { color: #904AE8; }
.board__read--comment-reply { font-size: 0.875rem; font-weight: 400; color: #222222; cursor: pointer; }
.board__read--comment-unfold { margin-top: 0.5rem; font-size: 0.875rem; font-weight: 400; color: #999999; cursor: pointer; }
.board__read--reply { margin-top: 1rem; width: 100%; display: none; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1.875rem; }
.board__read--reply-item { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.board__read--reply-user { width: 100%; display: flex; justify-content: flex-start; align-items: center; column-gap: 0.625rem; }
.board__read--reply-picture { position: relative; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 1px solid #DBDBDB; }
.board__read--reply-picture img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.board__read--reply-name { font-size: 16px; font-weight: 400; color: #222222; }
.board__read--reply-date { font-size: 0.875rem; font-weight: 400; color: #888888; }
.board__read--reply-info { padding-left: 3rem; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.75rem; }
.board__read--reply-text { width: 100%; font-size: 16px; font-weight: 400; color: #828282; line-height: 1.625rem; }
.board__read--reply-detail { display: inline-flex; justify-content: flex-start; align-items: center; column-gap: 0.5rem; }
.board__read--reply-return { display: none; justify-content: flex-start; align-items: center; column-gap: 0.25rem; cursor: pointer; }
.board__read--reply-return img { width: 18px; height: auto; }
.board__read--reply-return svg { width: 18px; height: auto; }
.board__read--reply-return path { fill: #222222; }
.board__read--reply-return:hover path { fill: #904AE8; }
.board__read--reply-return:hover p { color: #904AE8; }
.board__read--reply-reply { font-size: 0.875rem; font-weight: 400; color: #999999; cursor: pointer; }
.board__read--reply-write { padding: 0.625rem 1.125rem; width: 100%; display: grid; grid-template-columns: auto 180px; border-radius: 0.25rem; border: 1px solid #E7E7E7; }
.board__read--reply-area { resize: none; width: 100%; font-size: 16px; font-weight: 400; color: #222222; line-height: 1.625rem; }
.board__read--reply-function { width: 100%; display: inline-flex; justify-content: flex-end; align-items: center; column-gap: 0.625rem; }
.board__read--reply-cancel { padding: 0.5rem 1.25rem; display: none; border-radius: 0.25rem; background: #E9E9E9; font-size: 16px; font-weight: 600; color: #999999; cursor: pointer; }
.board__read--reply-done { padding: 0.5rem 1.25rem; display: none; border-radius: 0.25rem; background: #FFCE0B; font-size: 16px; font-weight: 600; color: #222222; cursor: pointer; }


.board__write , .board__write * { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; outline: none; border: none; }
.board__write { padding-top: 50px; padding-bottom: 150px; width: 100%; }
.board__write--container { margin: 0 auto; max-width: 1200px; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 2.125rem; }
.board__write--header { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.board__write--title { font-size: 36px; font-weight: 700; color: #222222; }
.board__write--contents { width: 100%; display: inline-flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; border-top: 1px solid #222222; border-bottom: 1px solid #222222; }
.board__write--item { padding: 1.25rem 0; flex-shrink: 0; width: 100%; height: 100%; display: grid; grid-template-columns: 2fr 8fr; grid-auto-rows: auto; overflow: hidden; }
.board__write--item:first-child { border-bottom: 1px solid #DBDBDB; }
.board__write--item:last-child { border-top: 1px solid #DBDBDB; }
.board__write--item:first-child .board__write--column { justify-content: flex-start; align-items: center; }
.board__write--column { padding: 0.625rem 1.25rem; width: 100%; text-align: left; white-space: pre; font-size: 18px; font-weight: 400; color: #222222; }
.board__write--input, .board__write--attach-box { padding: 0.625rem 1.25rem; width: 100%; height: min-content; border-radius: 0.25rem; border: 1px solid #DBDBDB; background: #f6f6f6; }
.board__write--editor { border: 1px solid #DBDBDB; border-radius: 4px; overflow: hidden; }
.board__write--attach { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.5rem; }
.board__write--attach-list { display: flex; justify-content: flex-start; align-items: center; column-gap: 0.5rem; }
.board__write--attach-item { padding: 0.25rem 0.5rem; font-size: 0.875rem; font-weight: 400; color: #222222; border: 1px solid #DBDBDB; background: #FFFFFF; border-radius: 0.25rem; }
.board__write--attach-box { width: 100%; display: flex; justify-content: space-between; align-items: center; column-gap: 1rem; }
.board__write--attach-btn { padding: 0.125rem 0.5rem; border-radius: 0.25rem; border: 1px solid #DBDBDB; background: #FFFFFF; cursor: pointer; font-size: 0.875rem; font-weight: 400; color: #828282; }
.board__write--attach-info { font-size: 0.875rem; font-weight: 400; color: #A7A7A7; }
.board__write--attach-input { display: none; }
.borad__write--editor { width: 100%; height: 500px; }
.board__write--function { width: 100%; display: flex; justify-content: flex-end; align-items: center; column-gap: 0.625rem; }
.board__write--function > * { padding: 0.5rem 0.625rem; min-width: 66px; position: relative; display: inline-flex; justify-content: center; align-items: center; column-gap: 0.5rem; border-radius: 0.25rem; border: 1px solid #DBDBDB; cursor: pointer; }
.board__write--function > * svg { width: 18px; height: auto; }
.board__write--function > * img { width: 18px; height: auto; }
.board__write--function > * small { font-size: 16px; font-weight: 400; color: #222222; }
.board__write--function > *:hover { border: 1px solid #904AE8; }
.board__write--function > *:hover svg path { fill: #904AE8; }
.board__write--function > *:hover small { color: #904AE8; }

.board__edit , .board__edit * { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; outline: none; border: none; }
.board__edit { padding-top: 50px; padding-bottom: 150px; width: 100%; }
.board__edit--container { margin: 0 auto; width: 1200px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 2.125rem; }
.board__edit--header { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.board__edit--title { font-size: 36px; font-weight: 700; color: #222222; }
.board__edit--contents { width: 100%; display: inline-flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; border-top: 1px solid #222222; border-bottom: 1px solid #222222; }
.board__edit--item { padding: 1.25rem 0; width: 100%; display: grid; grid-template-columns: 2fr 8fr; }
.board__edit--item:first-child { border-bottom: 1px solid #DBDBDB; }
.board__edit--item:last-child { border-top: 1px solid #DBDBDB; }
.board__edit--item:first-child .board__write--column { justify-content: flex-start; align-items: center; }
.board__edit--column { padding: 0.625rem 1.25rem; width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: flex-start; font-size: 18px; font-weight: 400; color: #222222; }
.board__edit--input, .board__edit--attach-box { padding: 0.625rem 1.25rem; border-radius: 0.25rem; border: 1px solid #DBDBDB; background: #f6f6f6; }
.board__edit--attach { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.5rem; }
.board__edit--attach-list { display: flex; justify-content: flex-start; align-items: center; column-gap: 0.5rem; }
.board__edit--attach-item { padding: 0.25rem 0.5rem; font-size: 0.875rem; font-weight: 400; color: #222222; border: 1px solid #DBDBDB; background: #FFFFFF; border-radius: 0.25rem; }
.board__edit--attach-box { width: 100%; display: flex; justify-content: space-between; align-items: center; column-gap: 1rem; }
.board__edit--attach-btn { padding: 0.125rem 0.5rem; border-radius: 0.25rem; border: 1px solid #DBDBDB; background: #FFFFFF; cursor: pointer; font-size: 0.875rem; font-weight: 400; color: #828282; }
.board__edit--attach-info { font-size: 0.875rem; font-weight: 400; color: #A7A7A7; }
.board__edit--attach-input { display: none; }
.borad__edit--editor { width: 100%; height: 500px; }
.board__edit--function { width: 100%; display: flex; justify-content: flex-end; align-items: center; column-gap: 0.625rem; }
.board__edit--function > * { padding: 0.5rem 0.625rem; min-width: 66px; position: relative; display: inline-flex; justify-content: center; align-items: center; column-gap: 0.5rem; border-radius: 0.25rem; border: 1px solid #DBDBDB; cursor: pointer; }
.board__edit--function > * svg { width: 18px; height: auto; }
.board__edit--function > * img { width: 18px; height: auto; }
.board__edit--function > * small { font-size: 16px; font-weight: 400; color: #222222; }
.board__edit--function > *:hover { border: 1px solid #904AE8; }
.board__edit--function > *:hover svg path { fill: #904AE8; }
.board__edit--function > *:hover small { color: #904AE8; }

.qna__write , .qna__write * { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; outline: none; border: none; }
.qna__write { padding: 5rem 0; width: 100%; background: #F5F2FB; }
.qna__write--container { margin: 0 auto; width: 100%; max-width: 1200px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 2.25rem; }
.qna__write--header { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 2.5rem; }
.qna__write--header-side { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 6px; }
.qna__write--title { font-size: 40px; font-weight: 700; color: #222222; font-family: 'MontserratBold', sans-serif; }
.qna__write--sub { font-size: 18px; font-weight: 400; color: #222222; }
.qna__write--option { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 1rem; }
.qna__write--course { position: relative; width: 100%; }
.qna__write--course-select { padding: 0.625rem 1.25rem; width: 100%; border-radius: 0.25rem; background: #F6F6F6; border: 1px solid #DBDBDB; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.qna__write--course svg { position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; }
.qna__write--lecture { position: relative; width: 100%; }
.qna__write--lecture-select { padding: 0.625rem 1.25rem; width: 100%; border-radius: 0.25rem; background: #F6F6F6; border: 1px solid #DBDBDB; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.qna__write--lecture svg { position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; }
.qna__write--contents { padding: 2.75rem 1.875rem 1.875rem; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; height: 680px; background: #FFFFFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); border-radius: 0.625rem; overflow: hidden; }
.qna__write--item:first-child { padding-bottom: 2.75rem; width: 100%; display: flex; justify-content: flex-start; align-items: center; column-gap: 0.625rem; border-bottom: 1px dashed #CCCCCC; }
.qna__write--item:nth-child(2) { padding-bottom: 2rem; width: 100%; height: 100%; }
.qna__write--question-title { width: 100%; font-size: 20px; font-weight: 400; color: #828282; }
.qna__write--question-text { width: 100%; height: 100%; max-height: 100%; resize: none; overflow-y: auto; }
.qna__write--question-text:last-child::-webkit-scrollbar { width: 4px; }
.qna__write--question-text:last-child::-webkit-scrollbar-thumb { background: #904AE8; border-radius: 0.5rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.qna__write--question-text:last-child::-webkit-scrollbar-track { background: #CCCCCC; border-radius: 0.5rem; }
.qna__write--function { padding-top: 1.25rem; width: 100%; display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #CCCCCC; }
.qna__write--function-side:first-child { display: flex; justify-content: flex-start; align-items: center; column-gap: 0.5rem; }
.qna__write--function-side:last-child { display: flex; justify-content: flex-start; align-items: center; column-gap: 1.5rem; }
.qna__write--public { display: flex; justify-content: flex-start; align-items: center; column-gap: 1rem; }
.qna__write--public-title { font-size: 16px; font-weight: 500; color: #000000; }
.qna__write--public-item b { font-size: 16px; font-weight: 500; color: #000000; }
.qna__write--file { padding: 0.5rem 0.5rem; display: flex; justify-content: center; align-items: center; column-gap: 0.25rem; border: 1px solid #DBDBDB; border-radius: 0.25rem; background: #FFFFFF; cursor: pointer; }
.qna__write--file input { display: none; }
.qna__write--file p { font-size: 0.875rem; font-weight: 400; color: #222222; }
.qna__write--done { padding: 0.75rem 1rem; display: flex; justify-content: center; align-items: center; column-gap: 0.5rem; border-radius: 1.875rem; background: #904AE8; cursor: pointer; }
.qna__write--done p { font-size: 16px; font-weight: 400; color: #FFFFFF; }
.qna__write--doc { padding: 1rem; width: 100%; background: #FFFFFF; border-radius: 0.625rem; display: none; }
.qna__write--doc-list { display: inline-flex; justify-content: flex-start; align-items: center; column-gap: 1rem; row-gap: 1rem; flex-wrap: wrap; }
.qna__write--doc-item { padding: 0.5rem 0.75rem; position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; border: 1px solid #E5E5E5; border-radius: 0.5rem; cursor: pointer; }
.qna__write--doc-item::before { content: '📝'; }
.qna__write--doc-item p { width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 14px; font-weight: 400; color: #222222; }
.qna__write--doc-cancel, .qna__write--img-cancel { padding: 0.25rem; position: absolute; right: 0; top: 0; z-index: 10; transform: translate(50%, -50%); display: flex; justify-content: center; align-items: center; font-size: 10px; background: #FFFFFF; border-radius: 50%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); cursor: pointer; }
.qna__write--img { padding: 1rem; width: 100%; background: #FFFFFF; border-radius: 0.625rem; display: none; }
.qna__write--img-wrapper::-webkit-scrollbar { height: 6px; }
.qna__write--img-wrapper::-webkit-scrollbar-thumb { background: #904AE8; border-radius: 0.5rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.qna__write--img-wrapper::-webkit-scrollbar-track { background: #CCCCCC; border-radius: 0.5rem; }
.qna__write--img-wrapper { padding: 0.5rem; width: 100%; overflow-x: auto; }
.qna__write--img-list { display: inline-flex; justify-content: flex-start; align-items: center; column-gap: 1rem; flex-wrap: nowrap; }
.qna__write--img-item { position: relative; width: 150px; height: 100px; }
.qna__write--img-picture { width: 100%; height: 100%; overflow: hidden; border-radius: 0.5rem; box-shadow: 0 0 14px rgba(0, 0, 0, 0.1); }
.qna__write--img-item img { width: 100%; height: 100%; object-fit: cover; -o-object-fit: cover; }

.qna__edit , .qna__edit * { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; outline: none; border: none; }
.qna__edit { padding: 5rem 0; width: 100%; background: #F5F2FB; }
.qna__edit--container { margin: 0 auto; width: 100%; max-width: 1200px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 2.25rem; }
.qna__edit--header { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 2.5rem; }
.qna__edit--header-side { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.qna__edit--title { font-size: 40px; font-weight: 700; color: #222222; font-family: 'MontserratBold', sans-serif; }
.qna__edit--sub { font-size: 18px; font-weight: 400; color: #222222; }
.qna__edit--course { position: relative; width: 65%; }
.qna__edit--course.disabled { padding: 0.625rem 1.25rem; position: relative; width: 65%; border-radius: 0.25rem; background: #F6F6F6; border: 1px solid #DBDBDB; }
.qna__edit--course-select { padding: 0.625rem 1.25rem; width: 100%; border-radius: 0.25rem; background: #F6F6F6; border: 1px solid #DBDBDB; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.qna__edit--course svg { position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; }
.qna__edit--contents { padding: 2.75rem 1.875rem 1.875rem; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; height: 680px; background: #FFFFFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); border-radius: 0.625rem; overflow: hidden; }
.qna__edit--item:first-child { padding-bottom: 2.75rem; width: 100%; display: flex; justify-content: flex-start; align-items: center; column-gap: 0.625rem; border-bottom: 1px dashed #CCCCCC; }
.qna__edit--item:nth-child(2) { padding-bottom: 2rem; width: 100%; height: 100%; }
.qna__edit--question-title { width: 100%; font-size: 20px; font-weight: 400; color: #828282; }
.qna__edit--question-text { width: 100%; height: 100%; max-height: 100%; resize: none; overflow-y: auto; }
.qna__edit--question-text:last-child::-webkit-scrollbar { width: 4px; }
.qna__edit--question-text:last-child::-webkit-scrollbar-thumb { background: #904AE8; border-radius: 0.5rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.qna__edit--question-text:last-child::-webkit-scrollbar-track { background: #CCCCCC; border-radius: 0.5rem; }
.qna__edit--function { padding-top: 1.25rem; width: 100%; display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #CCCCCC; }
.qna__edit--function-side:first-child { display: flex; justify-content: flex-start; align-items: center; column-gap: 0.5rem; }
.qna__edit--function-side:last-child { display: flex; justify-content: flex-start; align-items: center; column-gap: 1.5rem; }
.qna__edit--public { display: flex; justify-content: flex-start; align-items: center; column-gap: 1rem; }
.qna__edit--public-title { font-size: 16px; font-weight: 500; color: #000000; }
.qna__edit--public-item b { font-size: 16px; font-weight: 500; color: #000000; }
.qna__edit--file { padding: 0.5rem 0.5rem; display: flex; justify-content: center; align-items: center; column-gap: 0.25rem; border: 1px solid #DBDBDB; border-radius: 0.25rem; background: #FFFFFF; cursor: pointer; }
.qna__edit--file input { display: none; }
.qna__edit--file p { font-size: 0.875rem; font-weight: 400; color: #222222; }
.qna__edit--done { padding: 0.75rem 1rem; display: flex; justify-content: center; align-items: center; column-gap: 0.5rem; border-radius: 1.875rem; background: #904AE8; cursor: pointer; }
.qna__edit--done p { font-size: 16px; font-weight: 400; color: #FFFFFF; }
.qna__edit--doc { padding: 1rem; width: 100%; background: #FFFFFF; border-radius: 0.625rem; display: none; }
.qna__edit--doc-list { display: inline-flex; justify-content: flex-start; align-items: center; column-gap: 1rem; row-gap: 1rem; flex-wrap: wrap; }
.qna__edit--doc-item { padding: 0.5rem 0.75rem; position: relative; max-width: 200px; display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; border: 1px solid #E5E5E5; border-radius: 0.5rem; font-size: 14px; font-weight: 400; cursor: pointer; }
.qna__edit--doc-item::before { content: '📝'; }
.qna__edit--doc-item p { width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.qna__edit--doc-cancel, .qna__edit--img-cancel { padding: 0.25rem; position: absolute; right: 0; top: 0; z-index: 10; transform: translate(50%, -50%); display: flex; justify-content: center; align-items: center; font-size: 10px; background: #FFFFFF; border-radius: 50%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); cursor: pointer; }
.qna__edit--img { padding: 1rem; width: 100%; background: #FFFFFF; border-radius: 0.625rem; display: none; }
.qna__edit--img-wrapper::-webkit-scrollbar { height: 6px; }
.qna__edit--img-wrapper::-webkit-scrollbar-thumb { background: #904AE8; border-radius: 0.5rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.qna__edit--img-wrapper::-webkit-scrollbar-track { background: #CCCCCC; border-radius: 0.5rem; }
.qna__edit--img-wrapper { padding: 0.5rem; width: 100%; overflow-x: auto; }
.qna__edit--img-list { display: inline-flex; justify-content: flex-start; align-items: center; column-gap: 1rem; flex-wrap: nowrap; }
.qna__edit--img-item { position: relative; width: 150px; height: 100px; }
.qna__edit--img-picture { width: 100%; height: 100%; overflow: hidden; border-radius: 0.5rem; box-shadow: 0 0 14px rgba(0, 0, 0, 0.1); }
.qna__edit--img-item img { width: 100%; height: 100%; object-fit: cover; -o-object-fit: cover; }

.course__search, .course__search * { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; outline: none; border: none; font-size: 16px; font-weight: 400; }
.course__search { padding: 5rem 0; width: 100%; }
.course__search--container { margin: 0 auto; max-width: 1200px; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
.course__search--header { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1.25rem; }
.course__search--side { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.course__search--title { display: flex; justify-content: flex-start; align-items: center; column-gap: 1.25rem; }
.course__search--title-text { font-size: 36px; font-weight: 700; color: #222222; }
.course__search--title-sub { font-size: 1.125rem; font-weight: 400; color: #222222; }
.course__search--input { padding: 0.5rem 1.5rem; display: inline-flex; justify-content: center; align-items: center; column-gap: 1rem; border-radius: 1.875rem; background: #F6F6F6; }
.course__search--input input { background: transparent; }
.course__search--function { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.course__search--active { display: inline-flex; justify-content: flex-start; align-items: center; gap: 1rem; }
.course__search--active-item { padding: 0.625rem 1.25rem; border-radius: 1.875rem; font-size: 16px; font-weight: 400; white-space: nowrap; color: #222222; cursor: pointer; display: flex; justify-content: space-between; align-items: center; column-gap: 0.5rem; }
.course__search--active-item.active { background: #904AE8; color: #FFFFFF; }
.course__search--active-item:hover { background: #904AE8; color: #FFFFFF; }
.course__search--active-item.course__search--delete:after { content: ''; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_3470_11678' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_3470_11678)'%3E%3Cpath d='M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A"); }
.course__search--align { display: inline-flex; justify-content: flex-start; align-items: center; }
.course__search--align-item { margin: 0 0.25rem; padding: 0 0.75rem; position: relative; cursor: pointer; }
.course__search--align-item img { position: absolute; z-index: 4; left: 0; top: 50%; width: 0; height: 10px; transform-origin: left ; }
.course__search--align-item svg { position: absolute; z-index: 4; left: 0; top: 50%; width: 0; height: 10px; transform-origin: left ; }
.course__search--align-item p { position: relative; z-index: 5; font-size: 18px; font-weight: 400; color: #222222; white-space: nowrap; }
.course__search--align-item:first-child {  border-right: 1px solid #222222; }
.course__search--align-item:nth-child(2) { margin: 0; }
.course__search--align-item:last-child {  border-left: 1px solid #222222; }
.course__search--align-item:hover p { color: #904AE8; }
.course__search--align-item:active svg { transition: all 300ms ease-out; width: 100%; height: 10px; }
.course__search--align-item:active p { color: #904AE8; }
.course__search--align-item.active svg { transition: all 300ms ease-out; width: 100%; height: 10px; }
.course__search--align-item.active p { color: #904AE8; }
.course__search--contents { margin-top: 1.25rem; padding: 2.25rem 0; width: 100%; display: grid; grid-template-columns: 270px auto; column-gap: 2.125rem; border-top: 1px solid #222222; }
.course__search--filter { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 2rem; }
.course__search--filter-container { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1rem; }
.course__search--filter-header { width: 100%; }
.course__search--filter-header p { padding: 0 0.625rem; font-size: 18px; font-weight: 400; color: #222222; }
.course__search--filter-contents { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.course__search--filter-contents a { width: 100%; }
.course__search--filter-item { padding: 0.625rem 1.5rem; width: 100%; display: flex; justify-content: space-between; align-items: center; border-radius: 2.625rem; cursor: pointer; }
.course__search--filter-item p { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 400; color: #828282; }
.course__search--filter-item label { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 400; color: #828282; }
.course__search--filter-item span { font-size: 16px; font-weight: 400; color: #828282; }
.course__search--filter-item.active { background: #F2F4FF; box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.1); }
.course__search--filter-item.active p { color: #904AE8; }
.course__search--filter-item.active span { color: #904AE8; }
.course__search--filter-item:hover { background: #F2F4FF; box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.1); }
.course__search--filter-item:hover p { color: #904AE8; }
.course__search--filter-item:hover span { color: #904AE8; }
.course__search--filter-item.skeleton { padding: 0.625rem; }
.course__search--filter-item.skeleton p { width: 70%; height: 25px; border-radius: 0.25rem; background-color: #e2e5e7; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-size: 40px 100%; background-repeat: no-repeat; background-position: left -40px top 0; animation: shine 1s ease infinite; }
.course__search--filter-item.skeleton span { width: 15%; height: 25px; border-radius: 0.25rem; background-color: #e2e5e7; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-size: 40px 100%; background-repeat: no-repeat; background-position: left -40px top 0; animation: shine 1s ease infinite; }
.course__search--subcategory-wrapper { display: none; }
.course__search--window { padding: 0.625rem 0.875rem 0.625rem 1.25rem; width: 100%; display: flex; justify-content: space-between; align-items: center; border: 1px solid #DBDBDB; border-radius: 2.5rem; }
.course__search--window input { width: 100%; font-size: 16px; font-weight: 400; color: #222222; }
.course__search--window input::placeholder { font-size: 16px; font-weight: 400; color: #B7B7B7; }
.course__search--window-btn { display: flex; justify-content: center; align-items: center; cursor: pointer; }
.course__search--list { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; }
.course__search--course { padding: 1.875rem 0; width: 100%; display: grid; grid-template-columns: 250px auto; column-gap: 1.875rem; border-bottom: 1px dashed #AAAAAA; }
.course__search--course:last-child { border-bottom: none; }
.course__search--course-thumbnail { aspect-ratio: 640 / 360; position: relative; width: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.course__search--course-thumbnail img:first-child { position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; object-fit: cover; border: 1px solid #dee2e6; }
.course__search--course-contents { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 1rem; }
.course__search--course-info { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; overflow: hidden; }
.course__search--course-title { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 24px; font-weight: 400; color: #222222; cursor: pointer; }
.course__search--course-from { margin-top: 1.25rem; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 400; color: #828282; }
.course__search--course-number { margin-top: 0.25rem; display: flex; justify-content: flex-start; align-items: center; column-gap: 1rem; }
.course__search--course-number > p { font-size: 16px; font-weight: 400; color: #828282; }
.course__search--course-number > div > span { font-size: 16px; font-weight: 400; color: #828282; }
.course__search--course-function { display: flex; justify-content: flex-end; align-items: center; column-gap: 0.625rem; }
.course__search--course-function > .course__search--course-btn:last-child svg path { fill: #222222; }
.course__search--course-function > .course__search--course-btn:last-child:hover svg path { fill: #904AE8; }
.course__search--course-btn { padding: 0.625rem; min-width: 105px; position: relative; display: inline-flex; justify-content: center; align-items: center; column-gap: 0.5rem; border-radius: 0.25rem; border: 1px solid #DBDBDB; cursor: pointer; }
.course__search--course-btn img { width: 20px; height: 20px; }
.course__search--course-btn svg { width: 20px; height: 20px; }
.course__search--course-btn svg path { fill: #222222; }
.course__search--course-btn p { white-space: pre; }
.course__search--course-btn:hover { border: 1px solid #904AE8; }
.course__search--course-btn:hover > svg path { fill: #904AE8; }
.course__search--course-btn:hover > p { color: #904AE8; }
.course__search--course-btn:active { border: 1px solid #904AE8; background: #904AE8; }
.course__search--course-btn:active > svg path { fill: #FFFFFF !important; }
.course__search--course-btn:active > p { color: #FFFFFF; }
.course__search--course-btn.disabled { background: #F6F6F6 !important; cursor: default; }
.course__search--course-btn.disabled img { filter: brightness(550%) !important; }
.course__search--course-btn.disabled { border: 1px solid #F6F6F6 !important; }
.course__search--course-btn.disabled path { fill: #999999 !important; }
.course__search--course-btn.disabled p { color: #999999 !important; }
.course__search--invite { padding: 0.75rem; position: absolute; right: 0; top: calc(100% + 1rem); z-index: 10; width: 300px; background: #FFFFFF; border: 1px solid rgba(0,0,0,.15); border-radius: 0.5rem; display: none; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; cursor: default; }
.course__search--invite-input { padding: 0.25rem 0.5rem; width: 100%; background: #E9ECEF; border-radius: 0.25rem; }
.course__search--invite-contents { padding: 0 0.25rem; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 0.25rem; }
.course__search--invite-side { display: inline-flex; justify-content: center; align-items: center; gap: 0.25rem; }
.course__search--invite-side:first-child { font-size: 12px; font-weight: 400; }
.course__search--invite-refresh, .course__search--invite-copy, .course__search--invite-cancel { padding: 0.25rem 0.5rem; height: 24px; border-radius: 0.25rem; border: 1px solid #DBDBDB; display: inline-flex; justify-content: center; align-items: center; gap: 0.25rem; white-space: nowrap; font-size: 12px; cursor: pointer; }
.course__search--invite-refresh img { width: 14px; }
.course__search--invite-refresh svg { width: 14px; }
.course__search--invite-refresh path { fill: #222222 !important; }
.course__search--invite-copy { border: 1px solid #904AE8; background: #904AE8; color: #FFFFFF !important; }

.course__search--course-title:hover { color: #904AE8; }

.course__invite--modal { padding: 1.25rem; position: fixed; z-index: 50; left: 0; top: 0; width: 100%; height: 100vh; display: none; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1px); }
.course__invite--modal.active { display: flex; }
.course__invite--modal * { margin: 0; padding: 0; }
.course__invite--form { min-width: 25vw; position: relative; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; background: #FFFFFF; border-radius: 0.5rem; overflow: hidden; }
.course__invite--header { padding: 0.75rem 1.25rem; width: 100%; display: flex; justify-content: space-between; align-items: center; row-gap: 1.625rem; background: #F5F5F5; }
.course__invite--title { font-size: 16px; font-weight: 600; color: #222222; }
.course__invite--cancel { cursor: pointer; }
.course__invite--contents { padding: 1.25rem; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.25rem; }
.course__invite--line { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.course__invite--input { padding: 0.5rem 0.75rem; width: 100%; border: 1px solid #dee2e6; border-radius: 0.25rem; }
.course__invite--request-btn { padding: 0.5rem 0.75rem; border-radius: 0.25rem; color: #FFFFFF; white-space: nowrap; background: #904AE8; cursor: pointer; }
.course__invite--course { width: 100%; display: none; grid-template-columns: 1fr 1.5fr; gap: 1rem; }
.course__invite--course-thumbnail { padding-top: 50%; position: relative; width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; border: 1px solid #dee2e6; }
.course__invite--course-thumbnail img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.course__invite--course-teacher { font-size: 14px; font-weight: 300; color: #828282; }
.course__invite--course-btn { padding: 0.5rem 0.75rem; width: 100%; display: none; justify-content: center; align-items: center; border-radius: 0.5rem; background: #904AE8; color: #FFFFFF; cursor: pointer; }
.course__invite--error { display: none; width: 100%; text-align: left; font-size: 14px; font-weight: 300; color: #222222; }
.course__invite { padding: 1.875rem 1.25rem; width: 100%; background: #F9FAFB; }
.course__invite--container { margin: 0 auto; max-width: 1200px; width: 100%; display: flex; justify-content: flex-end; align-items: center; }
.course__invite--open-btn { padding: 0.5rem 0.75rem; border-radius: 0.25rem; background: #904AE8; color: #FFFFFF; cursor: pointer; }

.academy__navigation { width: 100%; border-bottom: 1px solid #E5E5E5; }
.academy__navigation--container { margin: 0 auto; padding: 1.5rem 0; width: 100%; max-width: 1200px; }
.academy__navigation--btn { padding: 0.25rem 0.5rem; border-radius: 0.25rem; border: 1px solid #DBDBDB; display: inline-flex; justify-content: center; align-items: center; gap: 0.25rem; font-size: 14px; cursor: pointer; }

.course__search--total { padding: 0 0.625rem; font-size: 0.875rem; font-weight: 400; color: #222222; }
.course__search--lock { position: absolute; right: 0.5rem; top: 0.5rem; z-index: 6; }
.course__search--pagination { margin-top: 50px; width: 100%; display: flex; justify-content: center; align-items: center; column-gap: 0.625rem; }
.course__search--pagination-item { width: 30px; height: 30px; border-radius: 0.25rem; background: transparent; display: flex; justify-content: center; align-items: center; cursor: pointer; font-family: 'Montserrat', sans-serif; font-weight: 400; color: #222222; }
.course__search--pagination-item:hover { background: #904AE8; color: #FFFFFF; }
.course__search--pagination-item:hover svg path { fill: #FFFFFF; }
.course__search--pagination-item.active { background: #904AE8; color: #FFFFFF; }
.course__search--pagination-item.active svg path { fill: #FFFFFF; }
.teacher__list, .teacher__list * { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; outline: none; border: none; }
.teacher__list { padding: 5rem 0; width: 100%; min-height: 800px; background: #F5F2FB; }
.teacher__list--container { margin: 0 auto; max-width: 1200px; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 2.5rem; }
.teacher__list--header { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 2.5rem; }
.teacher__list--title { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.5rem; }
.teacher__list--title-text { font-size: 36px; font-weight: 700; color: #222222; }
.teacher__list--title-sub { font-size: 18px; font-weight: 400; color: #222222; }

.teacher__list--filter  { position: relative; width: 68.33%; height: min-content; max-height: 152px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; column-gap: 20px; row-gap: 10px; overflow-y: auto; overscroll-behavior: contain; }
.teacher__list--filter-item  { padding: 8px 30px; display: inline-flex; justify-content: center; align-items: center; border-radius: 40px; background: #FFFFFF; font-size: 18px; font-weight: 600; color: #222222; cursor: pointer; }
.teacher__list--filter-item:hover  { background: #904AE8; font-weight: 600; color: #FFFFFF;  }
.teacher__list--filter-item.active { background: #904AE8; font-weight: 600; color: #FFFFFF;  }
.teacher__list--figure { position: absolute; z-index: 1; right: 0; top: 100%; transform: translate(2%, -45%); }
.teacher__list--contents { position: relative; z-index: 2; width: 100%; display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 24px; place-content: flex-start; place-items: flex-start; }
.teacher__like--contents { position: relative; z-index: 2; width: 100%; display: inline-grid; grid-template-columns: repeat(2, 1fr); gap: 24px; place-content: flex-start; place-items: flex-start; }
.teacher__list--item { padding: 25px 40px; position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); background: #FFFFFF; overflow: hidden; }
.teacher__list--item-header { width: 100%; display: grid; grid-template-columns: 120px auto; grid-auto-rows: auto; gap: 20px; }
.teacher__list--item-header.none { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.teacher__list--item-header.none .teacher__list--profile { padding-top: unset; width: 120px; height: 160px; }
.teacher__list--item-header.none .teacher__list--name { width: 100%; text-align: center; }
.teacher__list--profile { padding-top: 130%;; position: relative; width: 120px; overflow: hidden; border: 1px solid #E1D2F3; background: #F5F2FB; border-radius: 10px 10px 10px 0; cursor: pointer; }
.teacher__list--profile-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.teacher__list--item-info { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; overflow: hidden; }
.teacher__list--item-user { width: 100%; display: inline-flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 4px; overflow: hidden; }
.teacher__list--name { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; font-weight: 400; color: #222222; }
.teacher__list--item-line { margin-top: 25px; width: 100%; height: 1px; border-top: 1px dashed #AAAAAA; }
.teacher__list--item-contents { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; row-gap: 2rem; }
.teacher__list--item-btn { padding: 0.5rem 1rem; display: inline-flex; justify-content: center; align-items: center; gap: 10px; border: 1px solid #904AE8; border-radius: 30px; background: #FFFFFF; cursor: pointer; }
.teacher__list--item-btn p { font-size: 16px; font-weight: 400; color: #904AE8; }
.teacher__list--info { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; row-gap: 0.25rem; }
.teacher__list--info-item { width: 100%; display: flex; justify-content: flex-start; align-items: center; column-gap: 0.5rem; }
.teacher__list--info-title { display: inline-flex; justify-content: flex-start; align-items: center; column-gap: 0.25rem; white-space: nowrap; }
.teacher__list--info-title p { font-size: 16px; font-weight: 400; color: #828282; }
.teacher__list--info-text { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.teacher__list--info-subject { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #904AE8; }
.teacher__list--none { position: relative; z-index: 10; width: 100%; height: 350px; display: none; flex-direction: column; justify-content: center; align-items: center; row-gap: 0.625rem; background: #FFFFFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); border-radius: 0.625rem; }
.teacher__list--none > img { width: 120px; }
.teacher__list--none-item { padding: 25px 40px; position: relative; width: 100%; height: 283px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); background: #FFFFFF; overflow: hidden; }
.teacher__list--none-header { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; }
.teacher__list--none-contents { width: 100%; height: 20px; }
.teacher__list--info-text.none { color: #AAAAAA; }
.teacher__list--info-subject.none { color: #AAAAAA; }

.teacher__read { padding: 5rem 0; width: 100%; background: #F5F2FB; }
.teacher__read--container { margin: 0 auto; max-width: 1200px; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 2.5rem; }
.teacher__read--header { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.5rem; }
.teacher__read--title-text { font-size: 36px; font-weight: 700; color: #222222; }
.teacher__read--title-sub { font-size: 18px; font-weight: 400; color: #222222; }
.teacher__read--figure { position: absolute; right: 0; top: 100%; transform: translate(5%, -40%); }
.teacher__read--contents { padding: 3rem; position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; background: #FFFFFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); border-radius: 0.625rem; }
.teacher__read--profile { padding-top: 130%;; position: relative; width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; border-radius: 10px; border: 1px dashed #AAAAAA; background: #f5f2fb; }
.teacher__read--profile-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.teacher__read--like { padding: 0.5rem 0.75rem; position: absolute; right: 0; top: 0; display: inline-flex; justify-content: center; align-items: center; gap: 0.25rem; border: 1px solid #E5E5E5; border-radius: 0.5rem; background: #FFFFFF; cursor: pointer; }
.teacher__read--like img { width: 22px; }
.teacher__read--like svg { width: 22px; }
.teacher__read--like span { white-space: nowrap; }
.teacher__read--like:hover { border: 1px solid #904AE8; background: #904AE8; }
.teacher__read--like:hover * { color: #FFFFFF; fill: #FFFFFF; }
.teacher__read--like.active { border: 1px solid #904AE8; background: #904AE8; }
.teacher__read--like.active * { color: #FFFFFF; fill: #FFFFFF; }
.teacher__read--info { position: relative; width: 100%; display: grid; grid-template-columns: 200px auto; gap: 3.875rem; }
.teacher__read--info-side { width: 100%; }
.teacher__read--info-header { padding: 20px 0; display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 10px; border-bottom: 1px dashed #AAAAAA; }
.teacher__read--info-item { width: 100%; display: flex; justify-content: flex-start; align-items: center; column-gap: 0.5rem; }
.teacher__read--info-title { min-width: 85px; display: inline-flex; justify-content: flex-start; align-items: center; column-gap: 0.25rem; }
.teacher__read--info-title p { font-size: 16px; font-weight: 400; color: #828282; }
.teacher__read--info-contents { padding-top: 20px; padding-right: 10px; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.625rem; }
.teacher__read--about-header { display: inline-flex; justify-content: flex-start; align-items: center; column-gap: 0.25rem; }
.teacher__read--about-header p { font-size: 16px; font-weight: 400; color: #828282; }
.teacher__read--about-contents { width: 100%; max-height: 400px; overflow-y: auto; }
.teacher__read--about-contents::-webkit-scrollbar { width: 4px; }
.teacher__read--about-contents::-webkit-scrollbar-thumb { background: #904AE8; border-radius: 0.5rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.teacher__read--about-contents::-webkit-scrollbar-track { background: #CCCCCC; border-radius: 0.5rem; }
.teacher__read--courses { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 2.5rem; }
.teacher__read--courses-header { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.teacher__read--courses-header > p { font-size: 24px; font-weight: 700; color: #222222; }
.teacher__read--courses-list { padding: 0.5rem 0.75rem; display: flex; justify-content: center; align-items: center; column-gap: 0.5rem; border: 1px solid #DBDBDB; border-radius: 0.25rem; cursor: pointer; background: #FFFFFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); }
.teacher__read--courses-contents { width: 100%; height: min-content; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 36px; }
.teacher__read--courses-item { position: relative; width: 100%; height: 100%; }
.teacher__course--item { width: 100%; height: 100%; display: grid; grid-auto-rows: 190px auto; background-color: #FFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); overflow: hidden; border-radius: 0.625rem; }
.teacher__course--item:hover { transition: all 300ms ease-out; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); }
.teacher__course--thumbnail { position: relative; width: 100%; height: 100%; overflow: hidden; }
.teacher__course--thumbnail:hover { cursor: pointer; }
.teacher__course--thumbnail-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
.teacher__course--item-contents { padding: 1.375rem 1.25rem; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.teacher__course--academy { font-size: 16px; font-weight: 400; color: #828282; }
.teacher__course--title { font-size: 16px; font-weight: 400; color: #222222;  }
.teacher__course--title:hover { color: #904AE8; cursor: pointer; }
.teacher__course--side:nth-child(2) { padding: 0.5rem 0; height: 100%; }
.teacher__course--side:last-child { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.teacher__course--date { font-size: 16px; font-weight: 400; color: #828282; }
.teacher__course--info { width: 100%; display: flex; justify-content: flex-end; align-items: center; column-gap: 0.75rem; }
.teacher__course--view { display: flex; justify-content: center; align-items: center; column-gap: 0.5rem; }
.teacher__course--view-icon { width: 18px; transform: translateY(10%); }
.teacher__course--view-number { font-size: 16px; font-weight: 400; color: #828282; }
.teacher__course--writer { font-size: 16px; font-weight: 400; color: #828282; }
.teacher__course--favorites { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 1.25rem; text-align: center; background-color: #FFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); }
.teacher__course--favorites-title { font-size: 18px; font-weight: 400; color: #222222; }
.teacher__course--favorites-title strong { font-size: 24px; font-weight: 400; color: #904AE8; }
.teacher__course--favorites-btn { padding: 0.625rem; display: flex; justify-content: center; align-items: center; column-gap: 0.5rem; border-radius: 0.5rem; border: 1px solid #DBDBDB; cursor: pointer; }

.contents__create, .contents__create * { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; outline: none; border: none; font-size: 16px; font-weight: 400; color: #222222; background: transparent; }
.contents__create { padding: 5rem 0; width: 100%; background: #F5F2FB; }
.contents__create--container { margin: 0 auto; width: 1200px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 2rem; }
.contents__create--header { width: 100%; display: flex; justify-content: flex-start; align-items: center; }
.contents__create--hero { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.25rem; }
.contents__create--hero-title { font-size: 40px; font-weight: 700; color: #222222; }
.contents__create--hero-sub { font-size: 18px; font-weight: 400; color: #222222; }
.contents__create--contents {padding: 2rem; width: 100%; display: grid; grid-template-columns: 1fr 1.5fr; column-gap: 2rem; border-radius: 0.75rem; background: #FFFFFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); }
.contents--create--preview { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1.25rem; }
.contents--create--preview-item { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.5rem; }
.contents--create--preview-title { font-size: 18px; font-weight: 700; color: #222222; }
.contents--create--preview-thumbnail { position: relative; width: 100%; height: 100%; background: #f6f6f6; border: 1px solid #DBDBDB; }
.contents--create--preview-thumbnail img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.contents--create--preview-video { width: 100%; height: 100%; background: #222222; display: flex; justify-content: center; align-items: center; }
.contents--create--preview-video video { width: 100%; display: none; }
.contents__create--side { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1rem; }
.contents__create--item { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1rem;  }
.contents__create--item-title { white-space: pre; font-size: 18px; font-weight: 700; color: #222222; }
.contents__create--input { padding: 0.5rem 1rem; width: 100%; font-size: 16px; font-weight: 400; color: #222222; border-radius: 0.25rem; background: #F6F6F6; border: 1px solid #DBDBDB; }
.contents__create--area { width: 100%; height: 380px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 0.25rem; background: #f6f6f6; border: 4px dashed #DBDBDB; }
.contents__create--btn { cursor: pointer; }
.contents__create--video { display: none; }
.contents__create--function { width: 100%; display: flex; justify-content: flex-end; align-items: center; column-gap: 1.25rem; }
.contents__create--function > div { min-width: 100px; }
.contents__create--done { padding: 0.5rem 0.75rem; display: flex; justify-content: center; align-items: center; column-gap: 0.5rem; background: #904AE8; border-radius: 0.25rem; cursor: pointer; }
.contents__create--done b { font-size: 16px; font-weight: 400; color: #FFFFFF; }
.contents__create--cancel { padding: 0.5rem 0.75rem; display: flex; justify-content: center; align-items: center; column-gap: 0.5rem; background: #FFFFFF; border-radius: 0.25rem; cursor: pointer; border: 1px solid #DBDBDB; }
.contents__create--cancel b { font-size: 16px; font-weight: 400; color: #222222; }
.contents__video--info { width: 100%; display: none; justify-content: flex-start; align-items: center; column-gap: 2rem; }
.contents__video--info-item { display: flex; justify-content: flex-start; align-items: center; column-gap: 0.5rem; }

.contents__view, .contents__view * { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; outline: none; border: none; font-size: 16px; font-weight: 400; color: #222222; background: transparent; }
.contents__view { padding: 5rem 0; width: 100%; background: #F5F2FB; }
.contents__view--container { margin: 0 auto; max-width: 1200px; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 2.25rem; }
.contents__view--header { width: 100%; display: grid; grid-template-columns: 1fr max-content; place-items: flex-end flex-start; gap: 10px; }
.contents__view--header-side { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 5px; }
.contents__view--title { font-size: 36px; font-weight: 700; }
.contents__view--contents { width: 100%; display: grid; grid-template-columns: 690px auto; grid-auto-rows: 430px; column-gap: 1.5rem; overflow: hidden; }
.contents__view--video { position: relative; width: 100%; height: 430px; display: flex; justify-content: center; align-items: center; }
.contents__view--video.stuck { position: fixed; z-index: 11; bottom: 40px; right: 40px; width: 520px; height: 350px; transform: translateY(100%); animation: fade-in-up 0.75s ease forwards; }
.contents__view--video.none { background-color: #e2e5e7; }
.contents__view--video iframe { width: 100%; height: 100%; }
.contents__view--file { position: relative; width: 100%; height: 430px; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; background: #FFFFFF; }
.contents__view--file-name { padding: 0.5rem 0.75rem; display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; border: 1px solid #E5E5E5; border-radius: 0.5rem; font-size: 14px; font-weight: 400; cursor: pointer; }
.contents__view--file-name::before { content: '📝'; }
.contents__view--file-btn { padding: 0.5rem 0.75rem; font-size: 16px; font-weight: 400; color: #FFFFFF; background: #904AE8; border-radius: 0.5rem; cursor: pointer; }
.contents__view--close { position: absolute; width: 30px; height: 30px; top: -40px; right: 0; cursor: pointer; display: none; }
.contents__view--info { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; background: #FFFFFF; }
.contents__view--info-header { padding: 1.375rem 1.25rem; width: 100%; display: flex; justify-content: flex-start; flex-direction: column; align-items: flex-start; background: #FAF8FE; row-gap: 0.625rem; }
.contents__view--teacher { width: 100%; display: inline-flex; justify-content: flex-start; align-items: center; column-gap: 0.5rem; overflow: hidden; }
.contents__view--teacher-picture { position: relative; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; }
.contents__view--teacher-picture img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.contents__view--teacher p { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contents__view--teacher-function { display: flex; justify-content: center; align-items: center; column-gap: 0.625rem; }
.contents__view--teacher-btn { padding: 0.3125rem 0.625rem; display: flex; justify-content: center; align-items: center; column-gap: 0.5rem; background: #FFFFFF; border: 1px solid #DBDBDB; border-radius: 0.25rem; cursor: pointer; }
.contents__view--teacher-btn img { height: 24px; width: auto; }
.contents__view--teacher-btn svg { height: 24px; width: auto; }
.contents__view--teacher-btn b { white-space: pre; font-size: 16px; font-weight: 400; color: #222222; }
.contents__view--info-contents { padding: 28px 20px; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 1rem; overflow: hidden; }
.contents__view--course { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; place-items: flex-start; row-gap: 1.25rem; overflow: hidden; }
.contents__view--course-item { width: 100%; height: 100%; display: grid; grid-template-columns: max-content 56px 1fr; gap: 11px; place-items: flex-start; overflow: hidden; }
.contents__view--course-item img { width: 20px; height: auto; }
.contents__view--course-item svg { width: 20px; height: auto; }
.contents__view--course-item b { white-space: pre; font-size: 15px; font-weight: 400; color: #222222; }
.contents__view--course-item p { font-size: 15px; font-weight: 400; color: #828282; }
.contents__view--attach { padding: 13px 10px 13px 20px; width: 100%; height: 100%; overflow: hidden; background: #F8F8F8; border-radius: 4px; }
.contents__view--attach-files { padding-right: 26px; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; place-items: flex-start; gap: 16px; overflow-y: auto; }
.contents__view--attach-files::-webkit-scrollbar { width: 4px; }
.contents__view--attach-files span { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 400; color: #828282; text-decoration: underline; cursor: pointer; }
.contents__view--attach-files span:hover { color: #904AE8; }
.contents__view--function { width: 100%; display: flex; justify-content: center; align-items: center; column-gap: 0.625rem; }
.contents__view--function-button { padding: 0.625rem 1rem; display: inline-flex; justify-content: center; align-items: center; column-gap: 0.75rem; border-radius: 1.875rem; cursor: pointer; }
.contents__view--function-button.theme1 { background: #6125AC; }
.contents__view--function-button.theme2 { background: #904AE8; }
.contents__view--function-button img { width: 20px; height: auto; }
.contents__view--function-button svg { width: 20px; height: auto; }
.contents__view--function-button svg path { fill: #FFFFFF; }
.contents__view--function-button span { font-size: 16px; font-weight: 400; color: #FFFFFF; }

.contents__other { padding: 5rem 0; width: 100%; }
.contents__other--container { margin: 0 auto; max-width: 1200px; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 2.25rem; }
.contents__other--header { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.contents__other--title { font-size: 24px; font-weight: 700; color: #222222; }
.contents__other--contents { width: 100%; display: inline-grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; grid-gap: 1.5rem; place-content: flex-start; place-items: flex-start; }
.contents__other--item { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: 220px auto; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); }
.contents__other--item:hover { transition: 300ms ease-out; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); }
.contents__other--thumbnail { position: relative; width: 100%; height: 100%; overflow: hidden; }
.contents__other--thumbnail img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.contents__other--bar { position: absolute; left: 0; top: 0; width: 0; height: 4px; background: red; }
.contents__other--time { padding: 0.125rem 0.25rem; position: absolute; right: 0.5rem; bottom: 0.5rem; font-size: 0.875rem; font-weight: 300; color: #FFFFFF; background: black; border-radius: 0.25rem; }
.contents__other--info { padding: 1.25rem; width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; row-gap: 0.625rem; overflow: hidden; border-top: 1px solid #DBDBDB; }
.contents__other--side { width: 100%; overflow: hidden; }
.contents__other--side:last-child { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.contents__other--side:last-child * { font-size: 12px ;font-weight: 400; color: #828282; }
.contents__other--sub { font-size: 14px; font-weight: 400; color: #828282; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contents__other--sub-title { font-size: 16px; font-weight: 700; color: #222222; }
.contents__other--sub-title:hover { color: #9044eb; }
.contents__other--name { font-size: 16px; font-weight: 700; color: #222222; }
.contents__other--side-item { display: inline-flex; justify-content: center; align-items: center; column-gap: 0.5rem; }
.contents__other--view { display: inline-flex; align-items: center; gap: 0.25rem; }
.contents__other--view img { width: 18px; height: fit-content; }
.contents__other--view svg { width: 18px; height: fit-content; }

.contents__other--thumbnail.skeleton { background-color: #e2e5e7; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-size: 40px 100%; background-repeat: no-repeat; background-position: left -40px top 0; animation: shine 1s ease infinite; }
.contents__other--sub.skeleton { width: 30%; height: 20px; background-color: #e2e5e7; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-size: 40px 100%; background-repeat: no-repeat; background-position: left -40px top 0; animation: shine 1s ease infinite; }
.contents__other--name.skeleton { width: 30%; height: 20px; background-color: #e2e5e7; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-size: 40px 100%; background-repeat: no-repeat; background-position: left -40px top 0; animation: shine 1s ease infinite; }
.contents__other--date.skeleton { width: 50%; height: 20px; background-color: #e2e5e7; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-size: 40px 100%; background-repeat: no-repeat; background-position: left -40px top 0; animation: shine 1s ease infinite; }
.contents__other--teacher.skeleton { width: 50%; height: 20px; background-color: #e2e5e7; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-size: 40px 100%; background-repeat: no-repeat; background-position: left -40px top 0; animation: shine 1s ease infinite; }

.contents__edit--thumbnail-file { display: none; }

.course__view--course-btn { padding: 0.25rem 0.75rem; position: relative; display: inline-flex; justify-content: center; align-items: center; column-gap: 0.5rem; border-radius: 4rem; border: 1px solid #DBDBDB; cursor: pointer; transform: translateY(2px); }
.course__view--course-btn img { height: 16px; }
.course__view--course-btn svg { height: 16px; }
.course__view--course-btn svg path { fill: #222222; }
.course__view--course-btn p { white-space: pre; font-size: 16px; font-weight: 400; }
.course__view--course-btn:hover { border: 1px solid #904AE8; }
.course__view--course-btn:hover path { fill: #904AE8; }
.course__view--course-btn:hover p { color: #904AE8; }
.course__view--course-btn.disabled { background: #F6F6F6; cursor: default; }
.course__view--course-btn.disabled img { filter: brightness(550%); }
.course__view--course-btn.disabled { border: 1px solid #F6F6F6; }
.course__view--course-btn.disabled path { fill: #999999; }
.course__view--course-btn.disabled p { color: #999999; }
.course__view--cancel-btn { padding: 0.3125rem 0.625rem; height: 100%; display: inline-flex; justify-content: center; align-items: center; column-gap: 0.25rem; background: #FFFFFF; border: 1px solid #DBDBDB; border-radius: 0.25rem !important; cursor: pointer; }
.course__view--cancel-btn * { color: #222222; }
.course__view--cancel-btn svg { height: 24px !important; }
.course__view--cancel-btn svg path { fill: #222222; }
.course__view--cancel-btn b { white-space: pre; font-size: 16px; font-weight: 400; color: #222222; }

.withdrawal, .withdrawal * { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; outline: none; border: none; font-size: 16px; font-weight: 400; color: #222222; background: transparent; }
.withdrawal { padding: 1rem; width: 100%; min-height: calc(100vh - 110px); display: flex; justify-content: center; align-items: center; background-image: url('/public/images/common/bg-login.png'); }
.withdrawal__container { margin: 0 auto; width: 1200px; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 2rem; }
.withdrawal__header { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.5rem; }
.withdrawal__title { font-size: 40px; font-weight: 700; color: #222222; }
.withdrawal__title--sub { font-size: 18px; font-weight: 400; color: #222222; }
.withdrawal__contents { padding: 5rem 1rem; width: 100%; border-radius: 1.25rem; background: #FFFFFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 0.75rem; }
.withdrawal__img { width: 120px; }
.withdrawal__btn { padding: 0.5rem; width: 100%; display: inline-flex; justify-content: center; align-items: center; column-gap: 0.625rem; border: 1px solid #DBDBDB; border-radius: 0.25rem; background: #904AE8; cursor: pointer; color: #FFFFFF; }
.withdrawal__btn * { color: #FFFFFF; }
.withdrawal__tip { padding: 2rem; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.5rem; border-radius: 1.25rem; background: #FFFFFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); }
.withdrawal__tip--title { font-size: 20px; font-weight: 700; color: #222222; }
.withdrawal__tip--contents { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.5rem; }
.withdrawal__tip--item { font-weight: 300; }
.withdrawal__tip--item::before { content: '· '; }
.withdrawal__tip--item-strong { color: #904AE8; }
.withdrawal__confirm { width: 25%; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 0.625rem; }
.withdrawal__confirm--input { padding: 0.5rem; width: 100%; border: 1px solid #DBDBDB; border-radius: 0.25rem; background: #FFFFFF; text-align: center; }
.withdrawal__confirm--label { display: flex; justify-content: center; align-items: center; column-gap: 0.25rem; white-space: pre; }
#withdrawal__confirm--other { display: none; }

.page__404, .page__404 * { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; outline: none; border: none; }
.page__404 { width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; background: #904AE8; }
.page__404--container { width: 50vw; height: 390px; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 0.625rem; border-radius: 1.25rem; background: #FFFFFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); }
.page__404--img { width: 120px; }
.page__404--title { font-size: 18px; font-weight: 400; color: #222222; }
.page__404--btn {  padding: 0.5rem 0.5rem; min-width: 66px; display: flex; justify-content: center; align-items: center; column-gap: 0.5rem; border: 1px solid #DBDBDB; border-radius: 0.5rem; background: #FFFFFF; cursor: pointer; }

.academy__banner                { width: 100%; height: 250px; background: #E1E3FA; }
.academy__banner--container     { margin: 0 auto; position: relative; max-width: 1500px; width: 100%; height: 100%; }
.academy__banner--container img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.academy__banner--info          { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 0.625rem; }
.academy__banner--info h1       { font-family: 'Gmarket Sans', serif; font-size: 36px; font-weight: 500; color: #6125AC; }
.academy__banner--info h2       { font-family: 'Gmarket Sans', serif; font-size: 18px; font-weight: 300; color: #687CFF; }

.gallery , .gallery * { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; outline: none; border: none; }
.gallery { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1.5rem; }
.gallery__header--title { font-size: 20px; font-weight: 600; color: #222222; }
.gallery__contents { width: 100%; height: 400px; background: #222222; }
.gallery__contents .swiper-pagination-bullet { background: #FFFFFF; }
.gallery__contents .swiper-pagination-bullet-active { background: #FFFFFF !important; }
.gallery__item--wrapper { width: 100%; height: 400px; }
.gallery__item { position: relative; width: auto; height: 400px; border-radius: unset; }
.gallery__item img { object-fit: contain; height: 400px; }
.gallery__function, .gallery__function--list { padding: 2rem 0; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; row-gap: 1.25rem; }
.gallery__function--item { width: 100%; display: grid; grid-template-columns: 20% auto; column-gap: 2.5rem; place-items: center flex-start; }
.gallery__function--item > div:first-child { place-self: center; }
.gallery__function--item > div:last-child { width: 100%; }
.gallery__function--item input { padding: 0.5rem; border-radius: 0.5rem; border: 1px solid #DBDBDB; }
.gallery__function--item label { padding: 0.25rem; border: 1px solid #DBDBDB; }
.gallery__append--btn { padding: 0.25rem 0.75rem; border-radius: 0.25rem; border: 1px solid #DBDBDB; }
.gallery__add--btn { padding: 0.25rem 0.75rem; display: none; }

.academy__remote { position: fixed; z-index: 20; right: 3rem; bottom: 3rem; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 1.125rem; }
.academy__scroll--button, .academy__main--button { width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: #FFFFFF; border: 1px solid #EFEFEF; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1); cursor: pointer; }
.academy__scroll--button:hover, .academy__main--button:hover { box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3); }
.academy__scroll--button img, .academy__main--button img { width: 24px; }
.academy__scroll--button svg, .academy__main--button svg { width: 24px; }
.academy__quick--thumbnail-button { width: 60px; height: 60px; border-radius: 50%; cursor: pointer; user-select: none; background: url("/public/images/cloudlearning/thumbnail-remote.svg"); }
.academy__quick--thumbnail-button:hover { background: url("/public/images/cloudlearning/thumbnail-remote-hover.svg"); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
.academy__quick--content-button { width: 60px; height: 60px; border-radius: 50%; cursor: pointer; user-select: none; background: url("/public/images/cloudlearning/content-remote.svg"); }
.academy__quick--content-button:hover { background: url("/public/images/cloudlearning/content-remote-hover.svg"); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
.academy__quick--meeting-button { width: 60px; height: 60px; border-radius: 50%; cursor: pointer; user-select: none; background: url("/public/images/cloudlearning/meeting-remote.svg"); }
.academy__quick--meeting-button:hover { background: url("/public/images/cloudlearning/meeting-remote-hover.svg"); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
.academy__quick--cloudlearning-button { width: 60px; height: 60px; border-radius: 50%; cursor: pointer; user-select: none; background: url("/public/images/cloudlearning/cloudlearning-remote.svg"); }
.academy__main--button { background: #904AE8; border: 1px solid #904AE8; }

.manager-article * { font-size: 16px !important; font-weight: 300; }

.manager__user--sign, .manager__user--sign * { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; outline: none; border: none; }
.manager__user--sign { position: fixed; left: 0; top: 0; z-index: 9999; width: 100%; height: 100vh; display: none; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1px); }
.manager__user--sign-container { width: 800px; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; background: #FFFFFF; border-radius: 0.625rem; }
.manager__user--sign-header { padding: 1rem; width: 100%; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #DBDBDB; }
.manager__user--sign-title { font-size: 1.25rem; font-weight: 700; color: #222222; }
.manager__user--sign-cancel { font-size: 1.25rem; font-weight: 500; color: #999999; cursor: pointer; }
.manager__user--sign-contents { padding: 1rem 0.25rem; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.manager__user--sign-column { padding: 0 1.25rem; width: 100%; display: grid; grid-template-columns: 1fr 3fr 1fr; column-gap: 0.625rem; place-items: center; }
.manager__user--sign-column div { width: 100%; font-size: 16px; font-weight: 500; color: #222222; }
.manager__user--sign-column div:nth-child(2) { justify-content: flex-start; align-items: center; }
.manager__user--sign-list { padding: 0.625rem 0; width: 100%; max-height: 500px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.625rem; overflow-y: auto; }
.manager__user--sign-item { padding: 0 1.25rem; width: 100%; display: grid; grid-template-columns: 1fr 3fr 1fr; column-gap: 0.625rem; place-items: center; }
.manager__user--sign-item div { width: 100%; font-size: 0.875rem; font-weight: 400; color: #222222; }
.manager__user--sign-item div:nth-child(2) { justify-content: flex-start; align-items: center; }
.manager__user--sign-item div:nth-child(2) a:hover { color: #904AE8; }
.manager__user--id { cursor: pointer; }
.manager__slide--input { display: none; }
.manager__slide--input-check:checked ~ .manager__slide--input { display: flex; }
.manager__course--edit-learn,
.manager__course--edit-btn,
.manager__course--delete-btn { cursor: pointer; }
.manager__course--edit-learn:hover,
.manager__course--title:hover,
.manager__course--teacher:hover,
.manager__course--edit-btn:hover,
.manager__course--delete-btn:hover { color: #904AE8; }
.manager__course--teacher:hover,
.manager__course--title:hover,
.manager__course--edit-learn:hover,
.manager__teacher--create-btn { cursor: pointer; }

.course__update--date { display: none; }
.course__update--teacher-search { width: 100%; display: flex; justify-content: flex-start; align-items: center; column-gap: 0.5rem; }
.course__update--teacher-list { margin-top: 1rem; width: 100%; display: flex; justify-content: flex-start; align-items: center; column-gap: 1rem; }
.course__update--teacher-item { padding: 0.25rem 0.75rem; position: relative; border-radius: 1.25rem; background: #904AE8; }
.course__update--teacher-item p { margin: 0; font-size: 0.875rem; font-weight: 400; color: #FFFFFF; }
.course__update--teacher-cancel { padding: 0.25rem; position: absolute; right: 0; top: 0; transform: translate(50%, -50%); font-size: 10px; font-weight: 400; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); cursor: pointer; }
.course__update--modal-cancel { cursor: pointer; }

.manager__user--print, .manager__user--print * { margin: 0; padding: 0; border: none; outline: none; background: transparent; }
.manager__user--print { position: fixed; left: 0; top: 0; z-index: 100; width: 100%; height: 100vh; display: none; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1px); }
.manager__user--print-form { padding: 2rem; position: relative; width: 30vw; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1.25rem; background: #FFFFFF; border-radius: 1.25rem; }
.manager__user--print-cancel { position: absolute; right: 1rem; top: 1rem; cursor: pointer; }
.manager__user--print-item { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.625rem; }
.manager__user--print-item:first-child { width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; }
.manager__user--print-item:first-child p { font-size: 22px; font-weight: 600; color: #222222; }
.manager__user--print-column { width: 100%; font-size: 16px; font-weight: 500; color: #222222 }
.manager__user--print-content { padding: 0.5rem; border-radius: 0.625rem; width: 100%; font-size: 16px; font-weight: 400; color: #222222; background: #faf5ff; }
.manager__user--print-desc { height: 200px; }
.manager__user--wait { cursor: pointer; }
.manager__user--wait:hover { color: #904AE8; text-decoration: underline; }
.manager__user--print-submit { padding: 0.5rem 0; width: 100%; border-radius: 0.625rem; background: #904AE8; text-align: center; font-size: 18px; font-weight: 600; color: #FFFFFF; cursor: pointer; }

.manager__user--document, .manager__user--document * { margin: 0; padding: 0; border: none; outline: none; background: transparent; }
.manager__user--document { position: fixed; left: 0; top: 0; z-index: 100; width: 100%; height: 100vh; display: none; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1px); }
.manager__user--document-form { padding: 2rem; position: relative; width: 30vw; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1.25rem; background: #FFFFFF; border-radius: 1.25rem; }
.manager__user--document-cancel { position: absolute; right: 1rem; top: 1rem; cursor: pointer; }
.manager__user--document-item { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.625rem; }
.manager__user--document-item:first-child { width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; }
.manager__user--document-item:first-child p { font-size: 22px; font-weight: 600; color: #222222; }
.manager__user--document-column { width: 100%; font-size: 16px; font-weight: 500; color: #222222 }
.manager__user--document-content { padding: 0.5rem; border-radius: 0.625rem; width: 100%; font-size: 16px; font-weight: 400; color: #222222; background: #faf5ff; }
.manager__user--document-desc { height: 200px; }
.manager__user--document-submit { padding: 0.5rem 0; width: 100%; border-radius: 0.625rem; background: #904AE8; text-align: center; font-size: 18px; font-weight: 600; color: #FFFFFF; cursor: pointer; }
.manager__user--wait { cursor: pointer; }
.manager__user--wait:hover { color: #904AE8; text-decoration: underline; }
.manager__user--excel { margin-top: 1.25rem; padding: 1.25rem; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; border-radius: 0.625rem; border: 1px solid #eee; }
.manager__user--excel-header { padding: 1.25rem 0; width: 100%; display: grid; grid-template-columns: 1fr 0.5fr 2fr auto; place-items: center; column-gap: 0.5rem; border-bottom: 1px solid #eee; }
.manager__user--excel-contents { margin: 1.25rem 0; width: 100%; max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; align-items: stretch; row-gap: 0.625rem; }
.manager__user--excel-item { padding: 1.25rem 0; width: 100%; display: grid; grid-template-columns: 1fr 0.5fr 2fr auto; place-items: center; column-gap: 0.5rem; }
.manager__user--excel-none { width: 100%; height: 200px; display: flex; justify-content: center; align-items: center; }

.teacher__read--courses-list { padding: 0.5rem 0.75rem; display: inline-flex; justify-content: center; align-items: center; column-gap: 0.5rem; border: 1px solid #DBDBDB; border-radius: 0.25rem; cursor: pointer; background: #FFFFFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); }
.teacher__course--date { white-space: nowrap; font-size: 16px; font-weight: 400; color: #828282; }
.manager__teacher--list-none { width: 100%; height: 300px; display: none; justify-content: center; align-items: center; }

.toastui-editor-mode-switch     { display: none !important; }
.toastui-editor-mode-switch div { display: none !important; }
.toastui-editor-contents        { z-index: 5 !important; }
.toastui-editor-contents *      { font-family: 'Pretendard', 'Noto Sans KR', sans-serif !important;  }

.construction__modal { position: fixed; left: 0; top: 0; z-index: 30; width: 100%; height: 100vh; display: none !important; flex-direction: column; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1px); }
.construction__modal p { font-size: 72px; font-weight: 700; color: #FFFFFF; }
.construction__modal a { padding: 0.5rem 1.25rem; display: inline-flex; justify-content: center; align-items: center; column-gap: 0.5rem; background: #904AE8; border-radius: 0.5rem; color: #FFFFFF !important; cursor: pointer; }

.academy__about                        { width: 100%; }
.academy__about--container             { margin: 0 auto; padding: 5rem 0; max-width: 1200px; width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 30px; overflow: hidden; }
.academy__about--header                { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.academy__about--title                 { font-size: 36px; font-weight: 700; }
.academy__about--contents              { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 30px; overflow: hidden; }
.academy__about--hero                  { width: 100%; display: grid; grid-template-columns: 1fr 0.485fr; grid-auto-rows: auto; gap: 24px; overflow: hidden; }
.academy__about--thumbnail             { padding-top: 56.25%; position: relative; width: 100%; overflow: hidden; border: 1px solid #DBDBDB; }
.academy__about--thumbnail-img         { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.academy__about--card                  { padding: 10px 20px; position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 25px; overflow: hidden; border: 1px solid #DBDBDB; background: #FFFFFF; }
.academy__about--card-header           { width: 100%; display: flex; justify-content: center; align-items: center; }
.academy__about--card-line             { margin: 0 auto; width: 68px; height: 1px; background: #DBDBDB; }
.academy__about--card-logo             { max-width: 170px; max-height: 70px; object-fit: contain; }
.academy__about--card-contents         { padding-top: 10px; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
.academy__about--card-address          { width: 100%; text-align: center; font-size: 18px; font-weight: 400; color: #222222; line-height: 24px; }
.academy__about--card-info             { width: 100%; text-align: center; line-height: 24px; }
.academy__about--card-info span        { font-size: 18px; font-weight: 700; color: #222222; }
.academy__about--sns                   { width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; overflow: hidden; }
.academy__about--sns-item              { position: relative; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; cursor: pointer; }
.academy__about--sns-item img          { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.academy__about--description           { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 24px; overflow: hidden; }
.academy__about--description-header    { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.academy__about--description-title     { font-size: 24px; font-weight: 700; color: #222222; }
.academy__about--description-contents  { width: 100%; white-space: pre-line; line-height: 30px; word-break: keep-all; font-size: 18px; font-weight: 400; color: #222222; }
.academy__about--gallery               { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: 24px; overflow: hidden; }
.academy__about--gallery-container     { position: relative; width: 100%; }
.academy__about--gallery-visual        { width: 100%; height: 168px; }
.academy__about--gallery-item          { position: relative; width: 100%; max-width: 300px; height: 100%; overflow: hidden; border: 1px solid #DBDBDB; cursor: pointer; }
.academy__about--gallery-thumb         { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.academy__about--gallery-function      { width: 100%; display: flex; justify-content: center; align-items: center; gap: 20px; }
.academy__about--gallery-btn           { width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; border-radius: 50%; border: 1px solid #DBDBDB; background: #FFFFFF; overflow: hidden; cursor: pointer; }
.academy__about--gallery-content:hover { color: #904AE8; }

.learn { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 20px; }
.learn__header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.learn__title { font-size: 32px; font-weight: 700; color: #222222; }
.learn__contents { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 0; }
.learn__container { display: none !important; }
.learn__container.active { display: grid !important; }
.learn__menu { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 0; border-bottom: 1px solid #DBDBDB; border-radius: 0.125rem; }
.learn__menu--item { margin-bottom: -1px; padding: 0.5rem 0.75rem; display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 0.125rem; border: 1px solid transparent; }
.learn__menu--item.active { border: 1px solid #DBDBDB; border-bottom: 1px solid #FFFFFF; }
.learn__icon--btn { width: min-content; user-select: none; cursor: pointer; }
.learn__icon--btn img { width: 16px; height: 16px; }
.learn__confirm--btn { padding: 6px 8px; width: min-content; display: inline-flex; align-items: center; gap: 4px; color: #FFFFFF; background: #904AE8; border: 1px solid #904AE8; border-radius: 4px; user-select: none; cursor: pointer; }
.learn__confirm--btn img { width: 16px; height: 16px; }
.learn__confirm--btn span { white-space: nowrap; font-size: 14px; font-weight: 400; color: #FFFFFF; }
.learn__cancel--btn { padding: 6px 8px; width: min-content; display: inline-flex; align-items: center; gap: 4px; color: #904AE8; background: #FFFFFF; border: 1px solid #904AE8; border-radius: 4px; user-select: none; cursor: pointer; }
.learn__cancel--btn img { width: 16px; height: 16px; }
.learn__cancel--btn span { white-space: nowrap; font-size: 14px; font-weight: 400; color: #904AE8; }
.learn__search { padding: 6px 8px; width: 100%; height: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 8px; border-radius: 4px; border: 1px solid #DBDBDB; background: #FFFFFF; user-select: none; }
.learn__search--input { width: 100%; font-size: 14px; font-weight: 400; color: #222222; }
.learn__search--btn { width: 20px; height: 20px; cursor: pointer; }
.learn__search--btn-icon { width: 20px; height: 20px; }
.learn__status { padding: 20px 10px; width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 20px; place-items: flex-start; }
.learn__status--course { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; place-items: flex-start; }
.learn__status--course-header { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 10px; }
.learn__status--course-title { font-size: 16px; font-weight: 600; color: #222222; }
.learn__status--course-selector { padding: 8px 16px; min-width: 200px; border-radius: 4px; border: 1px solid #DBDBDB; font-size: 14px; font-weight: 400; color: #222222; }
.learn__status--tunnel { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; grid-auto-rows: auto; gap: 20px; place-items: center; }
.learn__status--group { padding: 20px; position: relative; width: 100%; height: 544px; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 10px; place-items: flex-start; border: 1px solid #DBDBDB; border-radius: 6px; overflow-y: auto; }
.learn__status--group.none:after { content: '조회된 학생이 없습니다.'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: 400; color: #222222; }
.learn__status--group-item { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 0; place-items: flex-start; border: 1px solid #DBDBDB; border-radius: 4px; }
.learn__status--group-item.wait .learn__status--group-wait { display: unset; }
.learn__status--group-item.ready .learn__status--group-all { display: unset; }
.learn__status--group-item.ready .learn__status--group-title:before { content: '▶'; margin-right: 10px; font-size: 10px; font-weight: 400; color: #222222; }
.learn__status--group-item.ready.active .learn__status--group-title:before { content: '▼'; margin-right: 10px; font-size: 10px; font-weight: 400; color: #222222; }
.learn__status--group-item.active .learn__status--group-contents { display: grid; }
.learn__status--group-header { padding: 10px; width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.learn__status--group-title { font-size: 14px; font-weight: 400; color: #222222; }
.learn__status--group-wait { display: none; width: 18px; height: 18px; user-select: none; }
.learn__status--group-wait img { width: 18px; height: 18px; }
.learn__status--group-contents { padding-left: 30px; display: none; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 0; place-items: flex-start; }
.learn__status--group-user { width: 100%; display: grid; grid-template-columns: min-content 1fr; place-items: center flex-start; gap: 10px; user-select: none; }
.learn__status--group-all { display: none; width: 14px; height: 14px; }
.learn__status--group-check { width: 14px; height: 14px; }
.learn__status--group-text { max-width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 4px; font-size: 14px; font-weight: 400; color: #222222; }
.learn__status--user { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-auto-rows: min-content; gap: 10px; place-items: flex-start; }
.learn__status--user-header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.learn__status--user-title { font-size: 16px; font-weight: 600; color: #222222; }
.learn__status--user-type { display: inline-flex; justify-content: center; align-items: center; border-radius: 4px; overflow: hidden; background: #FFFFFF; border: 1px solid #DBDBDB; user-select: none; }
.learn__status--user-type div { padding: 8px 12px; font-size: 14px; font-weight: 400; border-right: 1px solid #EEEEEE; cursor: pointer; }
.learn__status--user-type div.active { background: #904AE8; color: #FFFFFF; }
.learn__status--user-type div:last-child { border: none; }
.learn__status--user-state { display: inline-flex; justify-content: center; align-items: center; border-radius: 4px; overflow: hidden; background: #FFFFFF; border: 1px solid #DBDBDB; user-select: none; }
.learn__status--user-state div { padding: 8px 12px; font-size: 14px; font-weight: 400; border-right: 1px solid #EEEEEE; cursor: pointer; }
.learn__status--user-state div.active { background: #904AE8; color: #FFFFFF; }
.learn__status--user-state div:last-child { border: none; }
.learn__status--user-contents { padding: 12px; position: relative; width: 100%; height: 500px; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-auto-rows: max-content; gap: 0; place-items: flex-start; border: 1px solid #DBDBDB; border-radius: 6px; overflow: hidden; }
.learn__status--user-column { padding: 10px; width: 100%; display: grid; grid-template-columns: 20px 1fr 1fr 60px; gap: 6px; place-items: center flex-start; user-select: none; }
.learn__status--user-text { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 400; color: #AAAAAA; }
.learn__status--user-text.center { text-align: center; }
.learn__status--user-list { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 0; place-items: flex-start; overflow-y: auto; }
.learn__status--user-list::-webkit-scrollbar { width: 0; }
.learn__status--user-list.wait:after { content: url("/public/images/icon/load.svg"); position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #FFFFFF; backdrop-filter: blur(1px); }
.learn__status--user-list.none:after { content: '조회된 학생이 없습니다.'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: 400; color: #222222; }
.learn__status--user-item { padding: 10px; width: 100%; min-height: 44px; display: grid; grid-template-columns: 20px 1fr 1fr 60px; gap: 6px; place-items: center flex-start; border-radius: 6px; font-size: 14px; font-weight: 400; color: #222222; user-select: none; cursor: pointer; }
.learn__status--user-item:hover { background: #F1E6FF; }
.learn__status--user-item.selected { background: #F1E6FF; }
.learn__status--user-item span { width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 400; color: #222222; }
.learn__status--user-status { padding: 4px 8px; border-radius: 4px; font-size: 14px; font-weight: 400; background: #C1FFE0; color: #32A76C; }
.learn__status--user-status.wait { padding: 4px 8px; border-radius: 4px; font-size: 14px; font-weight: 400; background: #DFDFDF; color: #4B4B4B; }
.learn__status--user-function { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; overflow: hidden; }
.learn__status--user-info { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.learn__status--user-info span { font-size: 14px; font-weight: 400; }
.learn__status--org-contents { display: none; }
.learn__status--org-contents.active { display: grid; }
.learn__group { padding: 20px 10px; width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 20px; place-items: flex-start; }
.learn__group--header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.learn__group--title { font-size: 20px; font-weight: 600; color: #222222; }
.learn__group--option { display: inline-flex; justify-content: center; align-items: center; gap: 10px; }
.learn__group--function { display: inline-flex; justify-content: center; align-items: center; gap: 10px; }
.learn__group--contents { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 10px; place-items: flex-start; }
.learn__group--column { width: 100%; display: grid; grid-template-columns: 1.5fr 1fr 1fr 2fr; place-items: center; border-top: 1px solid #DBDBDB; border-bottom: 1px solid #DBDBDB; }
.learn__group--column-text { padding: 10px 0; width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 4px; font-size: 14px; font-weight: 400; color: #AAAAAA; }
.learn__group--list { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 0; place-items: flex-start; }
.learn__group--item { padding: 10px; width: 100%; display: grid; grid-template-columns: 1.5fr 1fr 1fr 2fr; place-items: center; }
.learn__group--item:hover { background: #F1E6FF; }
.learn__group--item-link { max-width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 4px; font-size: 14px; font-weight: 400; color: #222222; cursor: pointer; }
.learn__group--item-link:hover { color: #904AE8; text-decoration: underline; }
.learn__group--item-text { width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 4px; font-size: 14px; font-weight: 400; color: #222222; }
.learn__group--item-function { display: inline-flex; justify-content: center; align-items: center; gap: 4px; }
.learn__group--item-input { padding: 8px 6px; width: 100%; height: 100%; border-radius: 4px; border: 1px solid #DBDBDB; background: #FFFFFF; text-align: center; font-size: 12px; font-weight: 400; color: #222222; }
.learn__group--item-input:focus { border: 1px solid #904AE8; }
.learn__group--item-input::placeholder { font-size: 12px; }
.learn__group--tunnel { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; grid-auto-rows: auto; gap: 20px; place-items: center; }
.learn__group--user { align-self: start; width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; gap: 10px; place-items: flex-start; }
.learn__group--user-header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.learn__group--user-title { font-size: 16px; font-weight: 600; color: #222222; }
.learn__group--user-contents { padding: 20px; position: relative; width: 100%; height: 500px; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; place-items: flex-start; border: 1px solid #DBDBDB; border-radius: 6px; overflow-y: auto; }
.learn__group--user-column { padding: 0 10px; width: 100%; display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px; place-items: center; user-select: none; }
.learn__group--user-column .learn__group--user-text { padding: 10px 0; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 400; color: #AAAAAA; }
.learn__group--user-list { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 0; place-items: flex-start; overflow-y: auto; }
.learn__group--user-list.wait:after { content: url("/public/images/icon/load.svg"); position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #FFFFFF; backdrop-filter: blur(1px); }
.learn__group--user-list.none:after { content: '조회된 학생이 없습니다.'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: 400; color: #222222; }
.learn__group--user-item { padding: 10px; width: 100%; display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px; place-items: center flex-start; border-radius: 6px; font-size: 14px; font-weight: 400; color: #222222; user-select: none; cursor: pointer; }
.learn__group--user-item:hover { background: #F1E6FF; }
.learn__group--user-item.selected { background: #F1E6FF; }
.learn__group--user-item span { font-size: 14px; font-weight: 400; color: #222222; }
.learn__group--user-info { width: 100%; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.learn__group--user-info span:last-child { justify-self: flex-end; }
.learn__group--user-function { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; overflow: hidden; }
.learn__blacklist { padding: 20px 10px; width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 20px; place-items: flex-start; }
.learn__blacklist--course { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; place-items: flex-start; }
.learn__blacklist--course-header { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 10px; }
.learn__blacklist--course-title { font-size: 16px; font-weight: 600; color: #222222; }
.learn__blacklist--course-selector { padding: 8px 16px; min-width: 200px; border-radius: 4px; border: 1px solid #DBDBDB; font-size: 14px; font-weight: 400; color: #222222; }
.learn__blacklist--tunnel { width: 100%; display: grid; grid-template-columns: 1fr 2.25fr; grid-auto-rows: auto; gap: 20px; place-items: center; }
.learn__blacklist--user { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; place-items: flex-start; }
.learn__blacklist--user-header { width: 100%; min-height: 30px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.learn__blacklist--user-title { font-size: 16px; font-weight: 600; color: #222222; }
.learn__blacklist--user-contents { padding: 20px; position: relative; width: 100%; height: 500px; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; place-items: flex-start; border: 1px solid #DBDBDB; border-radius: 6px; overflow-y: auto; }
.learn__blacklist--user-contents.wait:after { content: url("/public/images/icon/load.svg"); position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #FFFFFF; backdrop-filter: blur(1px); }
.learn__blacklist--user-contents.none:after { content: '조회된 학생이 없습니다.'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: 400; color: #222222; }
.learn__blacklist--user-item { padding: 10px; width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 10px; place-items: center flex-start; border-radius: 6px; font-size: 14px; font-weight: 400; color: #222222; user-select: none; cursor: pointer; }
.learn__blacklist--user-item:hover { background: #F1E6FF; }
.learn__blacklist--user-item.selected { background: #F1E6FF; }
.learn__blacklist--content { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; place-items: flex-start; }
.learn__blacklist--content-header { width: 100%; min-height: 30px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.learn__blacklist--content-title { font-size: 16px; font-weight: 600; color: #222222; }
.learn__blacklist--content-contents { padding: 20px; position: relative; width: 100%; height: 500px; display: grid; grid-template-rows: auto 1fr; grid-auto-rows: min-content; gap: 10px; place-items: flex-start; border: 1px solid #DBDBDB; border-radius: 6px; overflow-y: auto; }
.learn__blacklist--content-column { padding: 0 10px; width: 100%; display: grid; grid-template-columns: auto 50px 2fr 1fr; gap: 10px; place-items: center; user-select: none; }
.learn__blacklist--content-column .learn__blacklist--content-text { padding: 10px 0; width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 4px; font-size: 14px; font-weight: 400; color: #AAAAAA; }
.learn__blacklist--content-list { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 0; place-items: flex-start; overflow-y: auto; }
.learn__blacklist--content-list.wait:after { content: url("/public/images/icon/load.svg"); position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #FFFFFF; backdrop-filter: blur(1px); }
.learn__blacklist--content-list.none:after { content: '조회된 콘텐츠가 없습니다.'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: 400; color: #222222; }
.learn__blacklist--content-check { width: 14px; height: 14px; }
.learn__blacklist--content-item { padding: 0 10px; width: 100%; display: grid; grid-template-columns: auto 50px 2fr 1fr; gap: 10px; place-items: center flex-start; border-radius: 6px; user-select: none; cursor: pointer; }
.learn__blacklist--content-item:hover { background: #F1E6FF; }
.learn__blacklist--content-check { width: 14px; height: 14px; }
.learn__blacklist--content-order { padding: 10px 0; width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 4px; font-size: 14px; font-weight: 400; color: #777777; }
.learn__blacklist--content-text { padding: 10px 0; width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 4px; font-size: 14px; font-weight: 400; color: #222222; }
.learn__blacklist--content-text:nth-child(3) { justify-content: flex-start; align-items: center; }
.learn__blacklist--content-status { padding: 4px 8px; border-radius: 4px; font-size: 14px; font-weight: 400; background: #C1FFE0; color: #32A76C; }
.learn__blacklist--content-status.blacklist { padding: 4px 8px; border-radius: 4px; font-size: 14px; font-weight: 400; background: #DFDFDF; color: #4B4B4B; }
.learn__blacklist--course-info { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.learn__excel { padding: 20px 10px; width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 20px; place-items: flex-start; }
.learn__excel--header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.learn__excel--description { font-size: 16px; font-weight: 400; color: #222222; }
.learn__excel--contents { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1rem; }
.learn__excel--label { width: 100%; }
.learn__excel--input { padding: 10px; width: 100%; border: 1px solid #E5E5E5; border-radius: 4px; background: #FFFFFF; }

.group__modal { padding: 20px; position: fixed; left: 0; top: 0; z-index: 40; width: 100%; height: 100vh; display: none; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1px); }
.group__modal.active { display: flex; }
.group__modal--container { padding: 20px; width: 100%; max-width: 400px; height: min-content; max-height: 70vh; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 10px; border-radius: 10px; background: #FFFFFF; }
.group__modal--header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.group__modal--title { font-size: 24px; font-weight: 700; color: #332E41; }
.group__modal--title strong { font-size: 24px; font-weight: 700; color: #402BC8; }
.group__modal--cancel { cursor: pointer; }
.group__modal--card-cancel { cursor: pointer; }
.group__modal--confirm-btn { padding: 10px 0; width: 100%; display: inline-flex; justify-content: center; align-items: center; border-radius: 4px; background: #904AE8; font-size: 16px; font-weight: 600; color: #FFFFFF; cursor: pointer; }
.group__modal--contents { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 10px; }
.group__modal--item { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-auto-rows: min-content; gap: 4px; }
.group__modal--item-title { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 500; color: #777777; }
.group__modal--item-box { width: 100%; display: inline-flex; justify-content: flex-start; align-items: center; gap: 10px; place-items: center; }
.group__modal--item-input { padding: 8px 6px; width: 100%; min-height: 40px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0); background: #F4F4F6; font-size: 16px; font-weight: 400; color: #222222; }
.group__modal--item-input:focus { border: 1px solid #904AE8; }
.group__modal--item-input::placeholder { font-size: 14px; }
.group__modal--item-radio { padding: 8px 10px; width: min-content; display: inline-flex; justify-content: center; align-items: center; border: 1px solid #DBDBDB; border-radius: 4px; background: #FFFFFF; cursor: pointer; }
.group__modal--item-radio.selected { border: 1px solid #904AE8; background: #D8D1FF; }
.group__modal--item-radio input { display: none; }
.group__modal--item-radio input:checked ~ .group__modal--item-circle { background-color: #904AE8; border: 2px solid #CCCCCC; }
.group__modal--item-radio label { cursor: pointer; white-space: nowrap; }
.group__modal--item-circle { position: relative; display: inline-flex; justify-content: flex-start; align-items: center; gap: 0.25rem; width: 16px; height: 16px; background-color: #E6E6E6; border: 2px solid #CCCCCC; border-radius: 50%; margin-right: .25rem; transition: .5s; }
.group__modal--item-circle:after { content: ''; position: absolute; left: 50%; top: 50%; z-index: 10; width: 100%; height: 100%; transform: translate(-50%, -50%); border: 1px solid #FFFFFF; border-radius: 50%; }
.group__modal--item-check { padding: 8px 6px; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-radius: 4px; border: 2px solid rgba(0, 0, 0, 0); background: #F4F4F6; font-size: 16px; font-weight: 400; color: #222222; }
.group__modal--item-check label { display: inline-flex; justify-content: center; align-items: center; gap: 4px; user-select: none; }
.group__modal--item-check input { width: 14px; height: 14px; }
.group__modal--item-check span { font-size: 14px; font-weight: 400; color: #332E41; }
.group__modal--item-check b { font-size: 14px; font-weight: 400; color: #FF0000; }

/* 모바일 스타일 ================*/
.course__filter--mob { padding: 1.125rem 0.625rem; width: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; row-gap: 1.125rem; background: #222222; }
.course__filter--mob-header { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 1rem; }
.course__filter--mob-side, .course__filter--mob-contents, .course__filter--mob-search { position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; border-radius: 0.25rem; background: #FFFFFF; overflow: hidden; }
.course__filter--mob-main, .course__filter--mob-sub, .course__filter--mob-subject, .course__filter--mob-search { padding: 0.625rem 1rem; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.course__filter--mob-side > img { transform: translateX(-100%); width: 8px; height: auto; }
.course__filter--mob-side > svg { transform: translateX(-100%); width: 8px; height: auto; }
.course__filter--mob-contents > img { transform: translateX(-100%); width: 8px; height: auto; }
.course__filter--mob-contents > svg { transform: translateX(-100%); width: 8px; height: auto; }
.course__filter--mob-side > option { width: 100%; background: #FFFFFF; }
.course__filter--mob-subject > option { width: 100%; background: #FFFFFF; }

.community__list { width: 100%; }
.community__list--container { margin: 0 auto; padding: 5rem 0; width: 100%; max-width: 1200px; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 2rem; }
.community__list--header { width: 100%; display: flex; justify-content: flex-start; align-items: center; }
.community__list--title { font-size: 36px; font-weight: 700; color: #222222; }
.community__list--contents { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 2rem; }
.community__list--side { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.community__list--inline { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.community__list--align { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 1rem; }
.community__list--align-item { padding: 0 0.75rem; font-size: 20px; font-weight: 700; color: #222222; cursor: pointer; }
.community__list--align-item:hover { color: #904AE8; }
.community__list--align-item.active { color: #904AE8; }
.community__list--search { padding: 1rem 1.25rem; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid #904AE8; border-radius: 12px; background: #FFFFFF; font-size: 18px; font-weight: 600; color: #222222; }
.community__list--search-input { width: 100%; outline: none; border: none; }
.community__list--search-btn { width: 24px; cursor: pointer; }
.community__list--search-btn img { max-width: 100%; }
.community__list--keyword { width: 100%; display: inline-flex; justify-content: flex-start; align-items: center; gap: 1rem; }
.community__list--keyword-item { padding: 0.5rem 1.25rem; border-radius: 0.5rem; background: #F1EAFE; font-size: 16px; font-weight: 700; color: #904AE8; cursor: pointer; }
.community__list--filter { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 1rem; }
.community__list--filter-title { white-space: nowrap; font-size: 16px; font-weight: 400; color: #222222; }
.community__list--filter-item { padding: 0.5rem 1.5rem 0.5rem 0.5rem; width: fit-content; display: inline-flex; justify-content: center; align-items: center; outline: none; border: none; border-radius: 0.25rem; background: #FFFFFF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.125); font-size: 16px; font-weight: 600; color: #222222; }
.community__list--filter-course { width: 100%; }
.community__list--write-btn { padding: 0.5rem 0.625rem; position: relative; display: inline-flex; justify-content: center; align-items: center; column-gap: 0.5rem; border-radius: 0.25rem; border: 1px solid #DBDBDB; cursor: pointer; background: #FFFFFF; }
.community__list--write-btn svg { width: 18px; height: auto; }
.community__list--write-btn img { width: 18px; height: auto; }
.community__list--write-btn small { white-space: nowrap; font-size: 16px; font-weight: 400; color: #222222; }
.community__list--write-btn:hover { border: 1px solid #904AE8; }
.community__list--write-btn:hover svg path { fill: #904AE8; }
.community__list--write-btn:hover small { color: #904AE8; }
.community__list--wrapper { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 1rem; }
.community__list--none { margin-top: 1.25rem; position: relative; z-index: 10; width: 100%; height: 350px; background: #FFFFFF; display: none; flex-direction: column; justify-content: center; align-items: center; row-gap: 0.25rem; border-radius: 0.625rem; }
.community__list--none p { font-size: 18px; font-weight: 400; color: #222222; }

.community__item { padding: 2rem 1.875rem; width: 100%; display: flex; justify-content: space-between; align-items: center; row-gap: 2rem; border-radius: 0.625rem; background: #FFFFFF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-bottom: 4px solid #DBDBDB; border-right: 2px solid #DBDBDB; }
.community__item--info { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; }
.community__item--category { font-size: 16px; font-weight: 500; color: #828282; }
.community__item--detail { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; }
.community__item--title { display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; }
.community__item--title-name { font-size: 18px; font-weight: 700; color: #222222; cursor: pointer; }
.community__item--title-name:hover { color: #904AE8; }
.community__item--date { display: inline-flex; justify-content: center; align-items: center; gap: 0.25rem; }
.community__item--date img, .community__item--date svg { width: 13px; }
.community__item--date path { fill: #AAAAAA; }
.community__item--date span { font-size: 14px; font-weight: 400; color: #AAAAAA; }
.community__item--writer img, .community__item--writer svg { width: 13px; }
.community__item--writer path { fill: #AAAAAA; }
.community__item--writer span { font-size: 14px; font-weight: 400; color: #AAAAAA; }
.community__item--open img, .community__item--open svg { width: 13px; }
.community__item--open path { fill: #AAAAAA; }
.community__item--open span { font-size: 14px; font-weight: 400; color: #AAAAAA; }
.community__item--status { width: fit-content; display: flex; justify-content: center; align-items: center; gap: 0.5rem; }
.community__item--status p { white-space: nowrap; }

.community__side { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: min-content auto; grid-auto-rows: min-content; gap: 1rem; }
.community__course { width: 100%; height: min-content; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; background: #FFFFFF; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
.community__course--thumbnail { padding-top: 56%; position: relative; width: 100%; cursor: pointer; }
.community__course--thumbnail img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.community__course--contents { padding: 1rem; height: fit-content; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; border-top: 1px solid #DBDBDB; }
.community__course--category { font-size: 14px; font-weight: 400; color: #828282; }
.community__course--title { font-size: 18px; font-weight: 700; color: #222222; cursor: pointer; }
.community__course--teachers { width: 100%; display: flex; justify-content: flex-start; align-items: center; overflow: hidden; gap: 0.5rem; }
.community__course--teachers-item { padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 14px; font-weight: 600; color: #6E79FC; background: #CCCEFE; cursor: pointer; }
.community__course--btn { padding: 0.25rem 0.5rem; border-radius: 0.25rem; align-self: flex-end; display: inline-flex; justify-content: center; align-items: center; gap: 0.25rem; border: 1px solid #DBDBDB; cursor: pointer; }
.community__course--btn img, .community__course--btn svg { width: 14px; }
.community__course--btn path { color: #222222; }
.community__course--btn span { font-size: 14px; font-weight: 400; color: #222222; }
.community__other { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; overflow: hidden; }
.community__other--header { padding: 0 0.5rem; width: 100%; }
.community__other--title { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 600; color: #222222; }
.community__other--contents { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; gap: 1rem; }
.community__other--item { padding: 1rem 1.25rem; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.75rem; background: #FFFFFF; border-radius: 0.25rem; box-shadow: 0 0 10px rgb(0 0 0 / 10%); overflow: hidden; }
.community__other--category { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 400; color: #828282; }
.community__other--title { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 0.25rem; }
.community__other--title img, .community__other--title svg { height: 20px; }
.community__other--title p { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 600; color: #222222; cursor: pointer;}
.community__other--title p:hover { color: #904AE8; }
.community__other--description { width: 100%; height: 40px; overflow: hidden; }
.community__other--description * { font-size: 14px !important; font-weight: 400 !important; color: #828282 !important; }
.community__other--info { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 0.25rem; }
.community__other--user { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; }
.community__other--user-icon { height: 20px; }
.community__other--user-name { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 500; color: #222222; }
.community__other--user-teacher { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 500; color: #222222; cursor: pointer; }
.community__other--status { display: inline-flex; justify-content: center; align-items: center; gap: 0.25rem; }
.community__other--status-text { white-space: nowrap; font-size: 14px; font-weight: 400; color: #222222; }
.community__other--status-img { height: 30px; }
.community__course--title:hover { color: #904AE8; }
.community__other--user-teacher:hover { color: #904AE8; }

.meeting__confirm--btn { padding: 6px 8px; width: min-content; display: inline-flex; align-items: center; gap: 4px; color: #FFFFFF; background: #904AE8; border: 1px solid #904AE8; border-radius: 4px; user-select: none; cursor: pointer; }
.meeting__confirm--btn img { width: 16px; height: 16px; }
.meeting__confirm--btn span { white-space: nowrap; font-size: 14px; font-weight: 400; color: #FFFFFF; }
.meeting__cancel--btn { padding: 6px 8px; width: min-content; display: inline-flex; align-items: center; gap: 4px; color: #904AE8; background: #FFFFFF; border: 1px solid #904AE8; border-radius: 4px; user-select: none; cursor: pointer; }
.meeting__cancel--btn img { width: 16px; height: 16px; }
.meeting__cancel--btn span { white-space: nowrap; font-size: 14px; font-weight: 400; color: #904AE8; }
.meeting__search { padding: 6px 8px; width: 100%; height: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 8px; border-radius: 4px; border: 1px solid #AAAAAA; background: #FFFFFF; user-select: none; }
.meeting__search--input { width: 100%; font-size: 14px; font-weight: 400; color: #222222; }
.meeting__search--btn { width: 20px; height: 20px; cursor: pointer; }
.meeting__search--btn-icon { width: 20px; height: 20px; }

.meeting__create { padding: 5rem 0; width: 100%; min-height: 800px; background: #F5F2FB; }
.meeting__create--modal { padding: 5vh 0; position: fixed; left: 0; top: 0; z-index: 35; width: 100%; height: 100vh; display: none; grid-template-columns: 1fr; overflow-y: auto; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1px); }
.meeting__create--modal.active { display: grid; }
.meeting__create--modal-container { margin: auto; max-width: 1200px; width: 100%; height: min-content; display: grid; grid-template-columns: 1fr; place-items: flex-start; gap: 0; background: #FFFFFF; border-radius: 6px; }
.meeting__create--modal-table { padding: 20px; width: 100%; display: grid; grid-template-columns: 3fr 1fr; place-items: flex-start; gap: 40px;}
.meeting__create--contents { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 16px; }
.meeting__create--header { padding: 20px; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 0; border-bottom: 1px solid #AAAAAA; }
.meeting__create--modal-cancel { width: 14px; cursor: pointer; user-select: none; }
.meeting__create--title { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.5rem; }
.meeting__create--title-text { font-size: 20px; font-weight: 700; color: #222222; }
.meeting__create--title-sub { font-size: 18px; font-weight: 400; color: #222222; }
.meeting__create--items { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; place-items: flex-start; gap: 16px; }
.meeting__create--item { width: 100%; display: grid; grid-template-columns: 1fr 8fr; grid-auto-rows: min-content; place-items: center flex-start; gap: 10px; }
.meeting__create--item-wrap { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.meeting__create--column { font-size: 14px; font-weight: bold; color: #828282; }
.meeting__create--input { padding: 10px; width: 100%; background-color: #FFFFFF;border: 1px solid #AAAAAA; border-radius: 4px; font-size: 14px; }
.meeting__create--input.disabled { background: #EEEEEE; filter: grayscale(1); pointer-events: none; user-select: none; cursor: default; }
.meeting__create--input.disabled { filter: grayscale(1); pointer-events: none; user-select: none; cursor: default; }
.meeting__create--text-warning { color: #ff0000; font-size: 12px; }
.meeting__create--preview { position: sticky; top: 20px; width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 16px; overflow: hidden; }
.meeting__create--preview-header { width: 100%; display: none; overflow: hidden; }
.meeting__create--preview-title { font-size: 24px; font-weight: bold; color: #000000; }
.meeting__create--preview-contents { display: none; grid-template-columns: 1fr; grid-auto-rows: min-content; overflow: hidden; gap: 7px; background-color: #fff; border-radius: 10px; padding: 14px; width: 100%; box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); }
.meeting__create--preview-function { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 10px; }
.meeting__create--delete-btn { width: 100%; color: #fff; background-color: #FF6B6B; border-radius: 4px; cursor: pointer; text-align: center; padding: 10px 0; font-size: 16px; }
.meeting__create--confirm-btn { width: 100%; color: #fff; background-color: #9044EB; border-radius: 4px; cursor: pointer; text-align: center; padding: 10px 0; font-size: 16px; }
.meeting__create--cancel-btn { width: 100%; color: #fff; background-color: #C7C6C8; border-radius: 4px; cursor: pointer; text-align: center; padding: 10px 0; font-size: 16px; }
.meeting__create--check { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 4px; place-items: center flex-start; overflow: hidden; }
.meeting__create--check-text { font-size: 14px; font-weight: 400; color: #222222; }
.meeting__create--join { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 10px; place-items: flex-start; }
.meeting__create--tunnel { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; grid-auto-rows: auto; gap: 20px; place-items: center; background: #FFFFFF; border-radius: 4px; }
.meeting__create--function { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; overflow: hidden; }
.meeting__create--user { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; place-items: flex-start; }
.meeting__create--user-header { width: 100%; min-height: 30px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.meeting__create--user-title { font-size: 16px; font-weight: 600; color: #222222; }
.meeting__create--user-contents { padding: 10px; position: relative; width: 100%; height: 300px; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 0; place-items: flex-start; border: 1px solid #AAAAAA; border-radius: 6px; overflow-y: auto; }
.meeting__create--user-column { padding: 0 10px; width: 100%; display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px; place-items: center; user-select: none; }
.meeting__create--user-column .meeting__create--user-text { padding: 10px 0; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 400; color: #AAAAAA; }
.meeting__create--user-list { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 0; place-items: flex-start; overflow-y: auto; }
.meeting__create--user-list.wait:after { content: url("/public/images/icon/load.svg"); position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #FFFFFF; backdrop-filter: blur(1px); }
.meeting__create--user-list.none:after { content: '조회된 학생이 없습니다.'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: 400; color: #222222; }
.meeting__create--user-check { width: 14px; height: 14px; }
.meeting__create--user-item { padding: 0 10px; position: relative; width: 100%; display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px; place-items: center flex-start; border-radius: 6px; user-select: none; cursor: pointer; }
.meeting__create--user-item:hover { background: #F1E6FF; }
.meeting__create--user-item.selected { background: #F1E6FF; }
.meeting__create--user-check { width: 14px; height: 14px; }
.meeting__create--user-text { padding: 10px 0; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 400; color: #222222; }
.meeting__create--user-text:last-child { text-align: center; }
.meeting__create--user-popup { text-align: center; position: absolute; right: 6px; top: 50%; width: 15px; height: 15px; background-color: red; border-radius: 100%; font-weight: bold; font-size: 10px; color: #fff; transform: translateY(-50%); }
.meeting__create--user-side { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; overflow: hidden; }
.meeting__create--user-count { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 400; color: #222222; }
.meeting__create--content { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; place-items: flex-start; }
.meeting__create--content-header { width: 100%; min-height: 30px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.meeting__create--content-title { font-size: 16px; font-weight: 600; color: #222222; }
.meeting__create--content-contents { padding: 10px; position: relative; width: 100%; height: 300px; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 0; place-items: flex-start; border: 1px solid #AAAAAA; border-radius: 6px; overflow-y: auto; }
.meeting__create--content-column { padding: 0 10px; width: 100%; display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px; place-items: center; user-select: none; }
.meeting__create--content-column .meeting__create--content-text { padding: 10px 0; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 400; color: #AAAAAA; }
.meeting__create--content-list { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 0; place-items: flex-start; overflow-y: auto; }
.meeting__create--content-list.wait:after { content: url("/public/images/icon/load.svg"); position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #FFFFFF; backdrop-filter: blur(1px); }
.meeting__create--content-list.none:after { content: '조회된 참여자가 없습니다.'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: 400; color: #222222; }
.meeting__create--content-check { width: 14px; height: 14px; }
.meeting__create--content-item { padding: 0 10px; width: 100%; display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px; place-items: center flex-start; border-radius: 6px; user-select: none; cursor: pointer; }
.meeting__create--content-item:hover { background: #F1E6FF; }
.meeting__create--content-item.selected { background: #F1E6FF; }
.meeting__create--content-check { width: 14px; height: 14px; }
.meeting__create--content-text { padding: 10px 0; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 400; color: #222222; }
.meeting__create--content-text:last-child { text-align: center; }
.meeting__create--content-side { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; overflow: hidden; }
.meeting__create--content-count { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 400; color: #222222; }

.meeting__create--iconbox { padding: 12px; width: 100%; display: grid; grid-template-columns: 32px 1fr 20px; place-items: flex-start; gap: 10px; overflow: hidden; background: #FFFFFF; border: 1px solid #828282; border-radius: 4px; cursor: pointer; user-select: none; }
.meeting__create--iconbox:hover { background: #EEEEEE; }
.meeting__create--iconbox-icon { position: relative; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #828282; }
.meeting__create--iconbox-icon img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.meeting__create--iconbox-info { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 4px; place-items: flex-start; overflow: hidden; }
.meeting__create--iconbox-title { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: bold; color: #000000; }
.meeting__create--iconbox-desc { width: 100%; font-size: 12px; font-weight: normal; color: #AAAAAA; }
.meeting__create--iconbox-input { width: 20px; height: 20px; }

.meeting__create--checkbox { padding: 12px; width: 100%; display: grid; grid-template-columns: 20px 1fr; place-items: flex-start; gap: 10px; overflow: hidden; background: #FFFFFF; border: 1px solid #828282; border-radius: 4px; cursor: pointer; user-select: none; }
.meeting__create--checkbox:hover { background: #EEEEEE; }
.meeting__create--checkbox-input { width: 20px; height: 20px; }
.meeting__create--checkbox-info { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 4px; place-items: flex-start; overflow: hidden; }
.meeting__create--checkbox-title { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: bold; color: #000000; }
.meeting__create--checkbox-desc { width: 100%; font-size: 12px; font-weight: normal; color: #AAAAAA; }

.meeting__list { padding: 5rem 0; width: 100%; min-height: 800px; background: #F5F2FB; }
.meeting__list--container { margin: 0 auto; max-width: 1200px; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 2.5rem; }
.meeting__list--header { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 2.5rem; }
.meeting__list--title { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.5rem; }
.meeting__list--title-text { font-size: 36px; font-weight: 700; color: #222222; }
.meeting__list--title-sub { font-size: 18px; font-weight: 400; color: #222222; }
.meeting__list--create-btn { position: absolute; right: 0; top: 0; color: #fff; background-color: #9044EB; padding: 7px 10px; border-radius: 10px; display: flex; flex-flow: row nowrap; align-items: center; justify-items: center; gap: 5px; cursor: pointer; }
.meeting__list--create-btn > svg { width: 16px; }
.meeting__list--create-btn > img { width: 16px; }
.meeting__list--create-btn > span { color: #fff; }
.meeting__list--contents { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 46px; place-items: flex-start; }
.meeting__list--group { width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 18px; place-items: flex-start; }
.meeting__list--group-header { width: 100%; }
.meeting__list--group-title { width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 4px; font-size: 24px; font-weight: bold; }
.meeting__list--group-title.live { color: #FF8080; }
.meeting__list--group-title.live:before { width: 25px; height: 25px; content: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12.5' cy='12.5' r='12.5' fill='%23FF8080'/%3E%3Ccircle cx='12.5' cy='12.5' r='6' stroke='white' stroke-width='5'/%3E%3C/svg%3E%0A"); }
.meeting__list--group-contents { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 33px; }
.meeting__list--item { display: flex; flex-flow: column nowrap; gap: 7px; background-color: #fff; border-radius: 10px; padding: 14px; width: 100%; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
.meeting__list--item-status { width: min-content; justify-self: flex-end; border-radius: 5px; white-space: nowrap; font-size: 10px; align-self: flex-end; background-color: #FF8080; padding: 3px 8px; color: #fff; }
.meeting__list--item-status.off { background: #C7C6C8; pointer-events: none; }
.meeting__list--item-title { width: 100%; overflow: hidden; font-size: 16px; font-weight: bold; }
.meeting__list--item-desc { width: 100%; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; font-size: 12px; min-height: 36px; }
.meeting__list--item-row { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 2px; overflow: hidden; }
.meeting__list--item-row * { text-align: right; }
.meeting__list--item-strong { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: #000000; }
.meeting__list--item-text { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: #828282; }
.meeting__list--item-right { text-align: right; }
.meeting__list--item-line { width: 100%; height: 1px; background: #828282; }
.meeting__list--item-btn { font-size: 14px; font-weight: bold; color: #fff; background-color: #FF8080; display: flex; align-items: center; justify-content: center; width: 100%; padding: 6px; border-radius: 5px; margin-top: 10px; cursor: pointer; }
.meeting__list--item-btn.end { background: #9980FF; }
.meeting__list--item-btn.up { background: #C7C6C8; pointer-events: none; cursor: default; }
.meeting__list--none { display: none; grid-column: 1 / 5; margin-top: 1.25rem; position: relative; z-index: 10; width: 100%; height: 350px; flex-direction: column; justify-content: center; align-items: center; row-gap: 0.25rem; border-radius: 0.625rem; }
.meeting__list--none p { font-size: 18px; font-weight: 400; color: #222222; }

.teacher__list--mobileFilter { position: relative; width: 100%; display: none; justify-content: space-between; align-items: center; border-radius: 0.625rem; border: 1px solid #DBDBDB; background: #FFFFFF; overflow: hidden; }
.teacher__list--mobileFilter > img { transform: translateX(-100%); width: 8px; height: auto; }
.teacher__list--mobileFilter > svg { transform: translateX(-100%); width: 8px; height: auto; }
.teacher__list--mobileFilter-selector { padding: 0.625rem 1rem; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

.board__read--comment-mob { padding: 0.75rem; width: 100%; display: none; justify-content: center; align-items: center; column-gap: 0.25rem; border-radius: 0.25rem; font-size: 16px; font-weight: 600; background: #904AE8; color: #FFFFFF; cursor: pointer; }
.board__read--comment-mob img { width: 20px; height: auto; }
.board__read--comment-mob svg { width: 20px; height: auto; }
.board__read--comment-mob path { fill: #FFFFFF; }
.board__read--comment-mob small { white-space: nowrap; font-size: 16px; font-weight: 400; color: #FFFFFF; }

.form-check-label { white-space: nowrap; }

@keyframes plump0 {
    0%   { transform: translate(-35%, calc(-50% - 0)); }
    10%  { transform: translate(-35%, calc(-50% + 10px)); }
    30%  { transform: translate(-35%, calc(-50% - 10px)); }
    64%  { transform: translate(-35%, calc(-50% + 10px)); }
    85%  { transform: translate(-35%, calc(-50% - 10px)); }
    100% { transform: translate(-35%, calc(-50% - 0)); }
}

@keyframes plump1 {
    0%   { transform: translate(-50%, calc(-25% - 0)); }
    10%  { transform: translate(-50%, calc(-25% + 10px)); }
    30%  { transform: translate(-50%, calc(-25% - 10px)); }
    64%  { transform: translate(-50%, calc(-25% + 10px)); }
    85%  { transform: translate(-50%, calc(-25% - 10px)); }
    100% { transform: translate(-50%, calc(-25% - 0)); }
}

@keyframes plump2 {
    0%   { transform: translate(45%, -10%); }
    10%  { transform: translate(45%, calc(-10% + 10px)); }
    30%  { transform: translate(45%, calc(-10% - 10px)); }
    64%  { transform: translate(45%, calc(-10% + 10px)); }
    85%  { transform: translate(45%, calc(-10% - 10px)); }
    100% { transform: translate(45%, -10%); }
}

@keyframes plump3 {
    0%   { transform: translate(0%, calc(-10% - 0)); }
    10%  { transform: translate(0%, calc(-10% + 10px)); }
    30%  { transform: translate(0%, calc(-10% - 10px)); }
    64%  { transform: translate(0%, calc(-10% + 10px)); }
    85%  { transform: translate(0%, calc(-10% - 10px)); }
    100% { transform: translate(0%, calc(-10% - 0)); }
}

@keyframes bounce {
    0%   { filter: blur(2px); transform: translateY(calc(-100% - 20px)); }
    10%  { filter: blur(2px); transform: translateY(0); }
    30%  { filter: blur(0px); transform: translateY(-20px); }
    50%  { filter: blur(0px); transform: translateY(0); }
    57%  { filter: blur(0px); transform: translateY(0); }
    64%  { filter: blur(0px); transform: translateY(-3px); }
    67%  { filter: blur(0px); transform: translateY(0px); }
    80%  { filter: blur(0px); transform: translateY(-2px); }
    100% { filter: blur(0px); transform: translateY(0); }
}
@keyframes fadeIn {
    to{ opacity: 1; }
}
@keyframes rotate180 {
    to{ transform: rotate(180deg); }
}
@keyframes shine {
    to { background-position: right -40px top 0; }
}
@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
        -webkit-transform: translate3d(-1px, 0, 0);
        -moz-transform: translate3d(-1px, 0, 0);
        -ms-transform: translate3d(-1px, 0, 0);
        -o-transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
        -webkit-transform: translate3d(2px, 0, 0);
        -moz-transform: translate3d(2px, 0, 0);
        -ms-transform: translate3d(2px, 0, 0);
        -o-transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
        -webkit-transform: translate3d(-4px, 0, 0);
        -moz-transform: translate3d(-4px, 0, 0);
        -ms-transform: translate3d(-4px, 0, 0);
        -o-transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
        -webkit-transform: translate3d(4px, 0, 0);
        -moz-transform: translate3d(4px, 0, 0);
        -ms-transform: translate3d(4px, 0, 0);
        -o-transform: translate3d(4px, 0, 0);
    }
}