/* ==========================================================================
   mypage_lab_plan.css
   Scoped under #mypage_lab_plan
   ========================================================================== */

/* ---------- CSS Variables ---------- */
:root {
    --color-primary-800: #1c30b2;
    --color-primary-700: #2c48d9;
    --color-primary-600: #4165ff;
    --color-neutral-900: #303342;
    --color-neutral-800: #484d5e;
    --color-neutral-700: #6c7286;
    --color-neutral-600: #949aac;
    --color-neutral-400: #d1d5de;
    --color-neutral-300: #dde2eb;
    --color-neutral-200: #e9eef5;
    --color-neutral-100: #f2f6fa;
    --color-neutral-50: #f5f7fa;
    --color-static-white: #fff;
}

/* ---------- Mypage Banner ---------- */
.mypage-banner {
    background-color: var(--color-static-white);
    border-bottom: 1px solid var(--color-neutral-300);
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.mypage-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    padding: 36px 0;
}

.mypage-banner__left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mypage-banner__title {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    color: var(--color-neutral-900);
    margin: 0;
}

.mypage-banner__sub {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: -0.16px;
    color: var(--color-primary-600);
    margin: 0;
}

.mypage-banner__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}

.mypage-banner__lab-name {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.2px;
    color: var(--color-neutral-700);
    margin: 0;
}

.mypage-banner__email {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: var(--color-neutral-700);
    margin: 0;
}

/* ---------- Container Layout ---------- */
#mypage_lab_plan {
    background-color: var(--color-neutral-50);
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 28px 0 80px;
    min-height: 600px;
}

#mypage_lab_plan .mypage__inner {
    display: flex;
    gap: 24px;
    width: 100%;
    max-width: 1200px;
    align-items: flex-start;
}

/* ---------- Sidebar ---------- */
#mypage_lab_plan .mypage__sidebar {
    width: 282px;
    flex-shrink: 0;
}

#mypage_lab_plan .mypage__menu {
    background-color: var(--color-static-white);
    border: 1px solid var(--color-neutral-300);
    border-radius: 8px;
    box-shadow: 0px 1px 4px 0px rgba(12, 12, 13, 0.05);
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#mypage_lab_plan .mypage__menu-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: var(--color-neutral-900);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.15s;
}

#mypage_lab_plan .mypage__menu-item:hover {
    background-color: var(--color-neutral-100);
}

#mypage_lab_plan .mypage__menu-item--active {
    font-weight: 700;
    color: var(--color-primary-600);
}

#mypage_lab_plan .mypage__menu-item--muted {
    color: var(--color-neutral-600);
}

/* ---------- Main Content ---------- */
#mypage_lab_plan .mypage__content {
    flex: 1;
    min-width: 0;
}

/* ---------- Plan Table (Card Container) ---------- */
#mypage_lab_plan .plan-table {
    background-color: var(--color-static-white);
    border: 1px solid var(--color-neutral-300);
    border-radius: 8px;
    box-shadow: 0px 1px 4px 0px rgba(12, 12, 13, 0.05);
    overflow: hidden;
    padding-bottom: 8px;
}

#mypage_lab_plan .plan-table__header {
    padding: 16px;
    border-bottom: 1px solid var(--color-neutral-300);
}

#mypage_lab_plan .plan-table__header-title {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: -0.16px;
    color: var(--color-neutral-800);
    margin: 0;
}

#mypage_lab_plan .plan-table__body {
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* ---------- Current Plan Group ---------- */
#mypage_lab_plan .plan-current-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

/* ---------- Current Plan Heading ---------- */
#mypage_lab_plan .plan-current {
    text-align: center;
    padding: 0 8px;
}

#mypage_lab_plan .plan-current__text {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.2px;
    color: var(--color-neutral-900);
    margin: 0;
}

#mypage_lab_plan .plan-current__highlight {
    color: var(--color-primary-600);
}

/* ---------- Plan Card (Free) ---------- */
#mypage_lab_plan .plan-card--free {
    background-color: var(--color-static-white);
    border: 2px solid var(--color-neutral-400);
    border-radius: 16px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

#mypage_lab_plan .plan-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

#mypage_lab_plan .plan-card__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    padding: 0 8px;
}

#mypage_lab_plan .plan-card__name {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.2px;
    color: #21272a;
    margin: 0;
}

#mypage_lab_plan .plan-card__desc {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: var(--color-neutral-800);
    margin: 0;
}

/* ---------- Plan Card Buttons ---------- */
#mypage_lab_plan .plan-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 12px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
    letter-spacing: -0.16px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    border: none;
    cursor: default;
}

#mypage_lab_plan .plan-card__btn--current {
    background-color: var(--color-static-white);
    color: var(--color-neutral-700);
    cursor: default;
}

#mypage_lab_plan .plan-card__btn--upgrade {
    background-color: var(--color-static-white);
    border: 1px solid var(--color-neutral-300);
    color: var(--color-neutral-700);
    cursor: pointer;
    transition: background-color 0.15s;
}

#mypage_lab_plan .plan-card__btn--upgrade:hover {
    background-color: var(--color-neutral-100);
}

/* ---------- Divider inside free card ---------- */
#mypage_lab_plan .plan-card__divider {
    width: 100%;
    height: 1px;
    background-color: var(--color-neutral-300);
}

/* ---------- Section Divider ---------- */
#mypage_lab_plan .plan-section-divider {
    width: 100%;
    height: 1px;
    background-color: var(--color-neutral-300);
}

/* ---------- Features List ---------- */
#mypage_lab_plan .plan-card__features {
    list-style: none;
    margin: 0;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#mypage_lab_plan .plan-card__feature {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.14px;
    color: var(--color-neutral-700);
}

#mypage_lab_plan .plan-card__feature--dark {
    color: var(--color-neutral-900);
}

#mypage_lab_plan .plan-card__check {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ---------- Upgrade Section ---------- */
#mypage_lab_plan .plan-upgrade {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}

#mypage_lab_plan .plan-upgrade__text {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: var(--color-neutral-800);
    text-align: center;
    margin: 0;
}

/* ---------- Paid Plan Cards (Standard & Professional) ---------- */
#mypage_lab_plan .plan-card--standard,
#mypage_lab_plan .plan-card--professional {
    background-color: var(--color-static-white);
    border: 1px solid var(--color-primary-600);
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ---------- Plan Card Header (colored banner) ---------- */
#mypage_lab_plan .plan-card__header {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 24px;
    border-radius: 16px 16px 0 0;
}

#mypage_lab_plan .plan-card__header--standard {
    background-color: var(--color-primary-700);
}

#mypage_lab_plan .plan-card__header--professional {
    background-color: var(--color-primary-800);
}

#mypage_lab_plan .plan-card__header-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 8px;
    min-height: 90px;
}

#mypage_lab_plan .plan-card__header-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

#mypage_lab_plan .plan-card__header-name {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.2px;
    color: var(--color-static-white);
    margin: 0;
}

#mypage_lab_plan .plan-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    background-color: #00c98d;
    border-radius: 500px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: -0.12px;
    color: var(--color-static-white);
    white-space: nowrap;
}

#mypage_lab_plan .plan-card__header-desc {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: var(--color-neutral-50);
    margin: 0;
}

#mypage_lab_plan .plan-card__header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    align-self: stretch;
    flex-shrink: 0;
}

/* ---------- Price ---------- */
#mypage_lab_plan .plan-card__price {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
}

#mypage_lab_plan .plan-card__price-num {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.2px;
    color: var(--color-static-white);
    text-align: center;
}

#mypage_lab_plan .plan-card__price-unit {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: -0.18px;
    color: var(--color-static-white);
    text-align: center;
}

#mypage_lab_plan .plan-card__price-per {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: var(--color-neutral-200);
    text-align: center;
}

/* ---------- Features Wrap (inside paid cards) ---------- */
#mypage_lab_plan .plan-card__features-wrap {
    padding: 20px 24px;
}

#mypage_lab_plan .plan-card__features-wrap .plan-card__features {
    padding: 0 8px;
}