@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(0.36, 0.07, 0.19, 0.97) both;
    -webkit-animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.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: 0.25rem;
    transition: 0.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(0.36, 0.07, 0.19, 0.97) both;
    -webkit-animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.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: 0.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(0.36, 0.07, 0.19, 0.97) both;
    -webkit-animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.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(0.36, 0.07, 0.19, 0.97) both;
    -webkit-animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.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(0.36, 0.07, 0.19, 0.97) both;
    -webkit-animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.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, 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;
    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;
    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-menu > button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
}
.content__edit--item-menu > button.isShowDate:before {
    content: "";
    width: 16px;
    height: 16px;
    display: block;
    background: #ffffff;
    border: 1px solid #904ae8;
    border-radius: 3px;
}
.content__edit--item-menu > button.isShowDate.checked:before {
    content: "";
    width: 16px;
    height: 16px;
    display: block;
    background: #ffffff;
    background-image: url("/public/icons/check.svg");
    background-position: center;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    border: 1px solid #904ae8;
    border-radius: 3px;
}
.content__edit--item-menu > button.isShowView:before {
    content: "";
    width: 16px;
    height: 16px;
    display: block;
    background: #ffffff;
    border: 1px solid #904ae8;
    border-radius: 3px;
}
.content__edit--item-menu > button.isShowView.checked:before {
    content: "";
    width: 16px;
    height: 16px;
    display: block;
    background: #ffffff;
    background-image: url("/public/icons/check.svg");
    background-position: center;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    border: 1px solid #904ae8;
    border-radius: 3px;
}
.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, 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: 80dvw;
    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, 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: 0.25rem;
    transition: 0.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);
    }
}