/* 기본 레이아웃 정의 */
.layoutHeadingH1 {
    font-size: 24px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.24px;
}

.layoutHeadingH2 {
    font-size: 20px;
    font-weight: 700;
    line-height: 140%;
}

.layoutHeadingH3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 140%;
}

.layoutBodyMediumM {
    font-size: 14px;
    font-weight: 500;
    line-height: 160%;
}

.layoutBodyMediumR {
    font-size: 14px;
    font-weight: 400;
    line-height: 160%;
}

.layoutBodyLargeR {
    font-size: 16px;
    font-weight: 400;
    line-height: 160%;
}


.layoutLabelSmallSB {
    font-size: 12px;
    font-weight: 600;
    line-height: 100%;
    margin-right: 8px;
}

.layoutLabelSmallB {
    font-size: 12px;
    font-weight: 700;
    line-height: 100%;
}

.layoutLabelMediumR {
    font-size: 14px;
    font-weight: 400;
    line-height: 100%;
}

.layoutLabelMediumM {
    font-size: 14px;
    font-weight: 500;
    line-height: 160%;
}

.layoutLabelMediumSB {
    font-size: 14px;
    font-weight: 600;
    line-height: 100%;
}

.layoutLabelMediumB {
    font-size: 14px;
    font-weight: 700;
    line-height: 100%;
}

.layoutLabelLargeSB {
    font-size: 16px;
    font-weight: 600;
    line-height: 100%;
}

.layoutLabelLargeB {
    font-size: 16px;
    font-weight: 700;
    line-height: 100%;
}

.layoutCaptionMediumB {
    font-size: 11px;
    font-weight: 500;
    line-height: 140%;
}

/* 레이아웃 */
.layoutCommon {
    background: #F8F9FA;
    width: 100%;
    min-height: 100vh;
}

.layoutCommon .layoutHead {
    width: 100%;
    height: 64px;
    background: #FFF;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E9ECEF;
}

.layoutCommon .layoutHead .layoutHeadGroup {
    display: flex;
    align-items: center;
    gap: 40px;
}

.layoutCommon .layoutHead .layoutHeadBar {
    width: 1px;
    height: 16px;
    background: #E9ECEF;
}
.layoutCommon .layoutHead .layoutHeadInfo {
    display: flex;
    align-items: center;
    /*gap: 8px;*/
}
.layoutCommon .layoutHead .layoutHeadInfo > .round {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    align-self: stretch;
    background: var(--Neutral-900, #212529);
    border-radius: 999px;
    border: 1px solid var(--Neutral-200, #E9ECEF);
    color: var(--Semantic-White, #FFF);
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}

.layoutCommon .layoutHead .layoutHeadPlan {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
}
.layoutCommon .layoutHead .layoutHeadPlanTrigger {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 var(--Spacing-SM, 8px) 0 var(--Spacing-MD, 16px);
    height: 100%;
    border-radius: var(--Radius-Pill, 999px);
    border: 1px solid var(--Neutral-200, #E9ECEF);
    background: var(--Semantic-White, #FFF);
}

.layoutCommon .layoutHead .layoutHeadPlanTrigger .layoutLabelPlanCount {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--Primary-500, #6C5CE7);
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
}
.layoutCommon .layoutHead .layoutHeadPlanTrigger .layoutLabelPlanCount .layoutLabelPlanSlash {
    display: flex;
    align-items: center;
    color: var(--Neutral-500, #ADB5BD);
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
}
.layoutCommon .layoutHead .layoutHeadPlanTrigger .layoutLabelPlanCount .layoutLabelPlanSlash:before {
    content: '';
    background: url(../images/i_slash.svg) no-repeat right 50% top 50%;
    display: flex;
    align-items: center;
    width: 5.5px;
    height: 11.58px;
}
.layoutCommon .layoutHead .layoutHeadPlanTrigger .layoutLabelPlanArrow {
    display: inline-block;
}
.layoutCommon .layoutHead .layoutHeadPlanTrigger .layoutLabelPlanArrow:hover{
    cursor: pointer;
    background: var(--Neutral-100, #F1F3F5);
    border-radius: var(--Radius-SM, 4px);
}
.layoutCommon .layoutHead .layoutHeadPlanTrigger .layoutLabelPlanArrow:before {
    content: '';
    background: url(../images/select_arrow2.svg) no-repeat right 50% top 50%;
    display: flex;
    width: 32px;
    height: 32px;
    border-radius: var(--Radius-SM, 4px);
    justify-content: center;
    align-items: center;
}

/* 플랜 카드 (Free plan 사용량) */
.layoutCommon .layoutHead .layoutLabelPlan {
    position: absolute;
    top: calc(100% + 28px);
    right: 0;
    display: flex;
    padding: var(--Spacing-MD, 16px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-SM, 8px);
    align-self: stretch;
    width: 256px;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    /*transform: translateY(-4px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;*/
    border-radius: 16.4px;
    background: #FFF;
    box-shadow: 0 4px 6px 0 rgba(108, 92, 231, 0.08);
}
.layoutCommon .layoutHead .layoutHeadPlan:has(.layoutLabelPlanArrow:hover) .layoutLabelPlan {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.layoutLabelPlanHeader {
    display: flex;
    align-items: center;
    gap: var(--Radius-SM, 4px);
    background: #FEFEFE;
}
.layoutLabelPlanIcon {
    width: 16px;
    height: 16px;
    aspect-ratio: 1 / 1;
}
.layoutLabelPlanType {
    color: var(--Neutral-800, #343A40);
    text-align: right;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
}
.layoutLabelPlanGroup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-MD, 16px);
    align-self: stretch;
}
.layoutLabelPlanUsage {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacing-SM, 8px);
    align-self: stretch;
}
.layoutLabelPlanUsageInfo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}
.layoutLabelPlanUsageTitle {
    color: var(--Neutral-900, #212529);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
}
.layoutLabelPlanUsageCount {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--Primary-500, #6C5CE7);
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
}
.layoutLabelPlanUsageCount .layoutLabelPlanSlash {
    display: flex;
    align-items: center;
    color: var(--Neutral-500, #ADB5BD);
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
}
.layoutLabelPlanUsageCount .layoutLabelPlanSlash:before {
    content: '';
    background: url(../images/i_slash.svg) no-repeat right 50% top 50%;
    display: flex;
    align-items: center;
    width: 5.5px;
    height: 11.58px;
}
.layoutLabelPlanBar {
    display: flex;
    width: 100%;
    height: 8px;
    /*padding-right: 33.305px;*/
    flex-direction: column;
    align-items: flex-start;
    border-radius: 16777200px;
    background: var(--Neutral-100, #F1F3F5);
}
.layoutLabelPlanBarFill {
    height: 8px;
    border-radius: 16777200px;
    background: var(--Primary-500, #6C5CE7);
    flex-shrink: 0;
    transition: width 0.2s ease;
}
.layoutLabelPlanDesc {
    color: var(--Neutral-600, #868E96);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    align-self: stretch;
}
.layoutLabelPlanHighlight {
    align-self: stretch;
    color: var(--Primary-500, #6C5CE7);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    vertical-align: baseline;
}
.layoutLabelPlanUpgrade {
    display: flex;
    padding: 3px 0;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    color: var(--Primary-500, #6C5CE7);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
}
.layoutLabelPlanUpgrade:hover {
    text-decoration: underline;
}

.layoutCommon .layoutHead .layoutLogo {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.layoutCommon .layoutHead .layoutLogo > label {
    
}
.layoutCommon .layoutHead .layoutLogo > a {}


.layoutCommon .layoutHead .layoutLogo.dropdownWrap {
    position: relative;
    height: 36px;
    width: 200px;
    top: 0;
    display: flex;
}
.layoutCommon .layoutHead .layoutLogo.dropdownWrap .headDropDownList {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    height: 36px;
    border: 1px solid var(--Neutral-200, #E9ECEF);
    border-radius: 8px;
    background: var(--Semantic-White, #FFF);
}

.layoutCommon .layoutHead .layoutLogo.dropdownWrap .headDropDownList > .headValueListArrow {
    display: inline-block;
}
.layoutCommon .layoutHead .layoutLogo.dropdownWrap .headDropDownList > .headValueListArrow:hover {
    cursor: pointer;
    background: var(--Neutral-100, #F1F3F5);
    border-radius: var(--Radius-SM, 4px);
}
.layoutCommon .layoutHead .layoutLogo.dropdownWrap .headDropDownList > .headValueListArrow:after {
    content: '';
    background: url(../images/select_arrow2.svg) no-repeat right 50% top 50%;
    display: flex;
    width: 32px;
    height: 32px;
    border-radius: var(--Radius-SM, 4px);
    justify-content: center;
    align-items: center;
}
.layoutCommon .layoutHead .layoutLogo.dropdownWrap .headChosenValue,
.layoutCommon .layoutHead .layoutLogo.dropdownWrap .headValueListWrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.layoutCommon .layoutHead .layoutLogo.dropdownWrap .headChosenValue {
    font-weight: 600;
    height: 36px;
    font-size: 14px;
    background-color: unset;
    width: calc(100% - 36px);
    padding: 0 4px 0 16px;
    border: unset;
}
.layoutCommon .layoutHead .layoutLogo.dropdownWrap .headChosenValue::-webkit-input-placeholder {
    color: #ADB5BD;
}
.layoutCommon .layoutHead .layoutLogo.dropdownWrap .headChosenValue:hover::-webkit-input-placeholder {
    color: #ADB5BD;
}
.layoutCommon .layoutHead .layoutLogo.dropdownWrap .headChosenValue:focus::-webkit-input-placeholder,
.layoutCommon .layoutHead .layoutLogo.dropdownWrap .headChosenValue.open::-webkit-input-placeholder {
    color: #ADB5BD;
}
.layoutCommon .layoutHead .layoutLogo.dropdownWrap .headValueListWrap {
    display: none;
    list-style: none;
    margin-top: 48px;
    padding: 8px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    border: 1px solid var(--Neutral-200, #E9ECEF);
    background: var(--Semantic-White, #FFF);
    box-shadow: 0 4px 6px 0 rgba(108, 92, 231, 0.08);
    transition: .3s ease-in-out;
}
.layoutCommon .layoutHead .layoutLogo.dropdownWrap .headValueListWrap.open {
    max-height: 320px;
    display: inline-block;
    overflow: auto;
    z-index: 100;
}
.layoutCommon .layoutHead .layoutLogo.dropdownWrap .headValueListWrap li {
    position: relative;
    height: 36px;
    background-color: var(--Semantic-White, #FFF);
    padding: 0 4px;
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color .3s;
    opacity: 1;
}
.layoutCommon .layoutHead .layoutLogo.dropdownWrap .headValueListWrap li:hover {
    color: var(--Primary-500, #6C5CE7);
    font-weight: 600;
    border-radius: 4px;
    background: var(--Primary-50, #E2DFFC);
}
.layoutCommon .layoutHead .layoutLogo.dropdownWrap .headValueListWrap li.closed {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    opacity: 0;
}







.layoutCommon .layoutHead .layoutNav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.layoutCommon .layoutHead .layoutNav > li {
    display: flex;
    justify-content: center;
    align-items: center;
}

.layoutCommon .layoutHead .layoutNav > li.active {
}

.layoutCommon .layoutHead .layoutNav > li.active > a {
    color: var(--Primary-500, #6C5CE7);
    font-weight: 700;
}

.layoutCommon .layoutHead .layoutNav > li > a {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--Neutral-700, #495057);
    cursor: pointer;
}

.layoutCommon .layoutHead .layoutBtn {
    display: flex;
    width: max-content;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.layoutCommon .layoutHead .layoutBtn > a {
    cursor: pointer;
}

.layoutCommon .layoutHead .layoutBtn .layoutBtnRule {
    color: var(--Neutral-600, #868E96);
    text-align: center;
    font-size: 12px;
    text-decoration: underline;
}

.layoutCommon .layoutHead .layoutBtn .layoutBtnLogin {
    display: flex;
    height: 36px;
    padding: 18px 20px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex: 1 0 0;
    border-radius: 999px;
    text-align: center;
    background: var(--Primary-50, #F2F1FD);
    color: var(--Primary-500, #6C5CE7);
}

.layoutCommon .layoutHead .layoutBtn .layoutBtnLogout {
    display: flex;
    height: 36px;
    padding: var(--Spacing-SM, 8px) var(--Spacing-MD, 16px);
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex: 1 0 0;
    border-radius: 999px;
    text-align: center;
    background: var(--Primary-50, #F2F1FD);
    color: var(--Primary-500, #6C5CE7);
    width: 82px;
}

.layoutCommon .layoutHead .layoutBtn .layoutBtnLogout:hover {
    background: var(--Primary-100, #E2DFFC);
}

.layoutCommon .layoutCont {
    width: 100%;
    min-height: calc(100vh - 350px);
    margin: auto;
}

.layoutCommon .layoutCont2 {
    width: 100%;
    min-height: calc(100vh - 64px);
}

.layoutCommon .layoutFoot {
    width: 100%;
    height: auto;
    min-height: 286px;
    padding: 50px 40px 0;
    border-top: 1px solid #E5E7EB;
    background: #FFF;
}

.layoutCommon .layoutFoot .layoutFootCont {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    flex-shrink: 0;
    align-self: stretch;
}

.layoutCommon .layoutFoot .layoutFootTop {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
    align-self: stretch;
}

.layoutCommon .layoutFoot .layoutFootBott {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    align-self: stretch;
    border-top: 1px solid #F3F4F6;
    padding: 34px 0 0;
    color: #99A1AF;
    font-family: Inter;
    font-size: 12px;
    line-height: 16px;
}

.layoutCommon .layoutFoot .layoutFootInfo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.layoutCommon .layoutFoot .layoutFootInfo > dt {
    color: #364153;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.312px;
}

.layoutCommon .layoutFoot .layoutFootInfo > dd {
    color: #6A7282;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    line-height: 22px;
    letter-spacing: -0.15px;
}

.layoutCommon .layoutFoot .layoutFootMenu {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.layoutCommon .layoutFoot .layoutFootMenuList {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

.layoutCommon .layoutFoot .layoutFootMenuList > li {
    font-family: Inter;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.15px;
}

.layoutCommon .layoutFoot .layoutFootMenuList > li > a {
    color: #6A7282;
    cursor: pointer;
}

.layoutCommon .layoutFoot .layoutFootMenuList > li.layoutFootMenuTit {
    font-weight: 700;
}

.layoutCommon .layoutFoot .layoutFootMenuList > li.layoutFootMenuTit > a {
    color: #101828;
}

.layoutCommon .layoutFoot .layoutFootMenuList > li.layoutFootMenuImpo {
}

.layoutCommon .layoutFoot .layoutFootMenuList > li.layoutFootMenuImpo > a {
    color: var(--Primary-500, #6C5CE7);
}

/* 레이아웃 */