.top_layout {
    margin-bottom: 32px;
}

/* ===== MyPage Tabs (.mt-*) ===== */
.mt {
    --fg: #0f172a;
    --muted: #6b7280;
    --border: #e5e7eb;
    --border2: #d1d5db;
    --card: #ffffff;
    --bg: #f8fafc;
    --primary: #0f172a;
    --primary-600: #0a0f1d;
    --shadow: 0 10px 28px rgba(2, 6, 23, .08);
    --r: 12px;
}

.mt-tablist {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: #eef2f7;
    color: var(--fg);
    padding: 4px;
    border-radius: 14px;
    border: 1px solid var(--border);
    gap: 4px;
}

.mt-tab {
    height: 40px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: #111827;
    font-weight: 800;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: .15s ease;
    outline: 0;
}

.mt-tab:hover {
    background: #e5eefb
}

.mt-tab.is-active {
    background: var(--card);
    border-color: var(--border2);
    box-shadow: 0 2px 0 rgba(2, 6, 23, .06) inset;
}

.mt-panel {
    padding-top: 16px
}

.is-hidden {
    display: none
}


/* ============== Order List (.ol-*) ============== */
.ol {
    --bg: #fff;
    --fg: #0f172a;
    --muted: #6b7280;
    --muted2: #94a3b8;
    --border: #e5e7eb;
    --border2: #d1d5db;
    --card: #ffffff;
    --primary: #0f172a;
    --primary-600: #090d16;
    --success: #16a34a;
    --warning: #f59e0b;
    --info: #2563eb;
    --secondary: #111827;
    --shadow: 0 10px 28px rgba(2, 6, 23, .08);
    --r-lg: 16px;
    --r-md: 12px;
}

/* 카드 */
.ol-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
}

.ol-card__header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.ol-card__title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--fg);
}

.ol-card__body {
    padding: 20px 24px;
}

.ol-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 주문 아이템 */
.ol-order {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
}

.ol-order__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ol-order__title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.ol-order__date {
    font-size: 13px;
    color: var(--muted);
}

.ol-order__right {
    text-align: right;
}

.ol-price {
    margin: 6px 0 0 0;
    font-weight: 900;
    font-size: 18px;
    color: #111827;
}

/* 뱃지 */
.ol-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid transparent;
}

.ol-badge svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2
}

.ol-badge--primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary-600);
}

.ol-badge--secondary {
    background: #f3f4f6;
    color: #111827;
    border-color: #e5e7eb;
}

/* 파일 태그 */
.ol-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.ol-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 8px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid var(--border2);
    font-size: 12px;
    color: #0f172a;
}

.ol-sec-title {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin: 0 0 8px 0;
}

/* 프로그레스바 */
.ol-progress-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ol-progress-label {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.ol-progress-val {
    font-size: 13px;
    color: var(--muted);
}

.ol-progress {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(9, 13, 22, 0.3);
    overflow: hidden;
}

.ol-progress__bar {
    position: absolute;
    inset: 0;
    width: var(--progress, 0%);
    background: var(--primary);
}

/* 작은 텍스트 */
.ol-small {
    font-size: 13px;
    color: var(--muted);
}

.ol-strong {
    font-weight: 700;
}

@media screen and (max-width:960px) {
    .ol-order__head{
        flex-direction: column;
    }
    .ol-order__right{
        text-align: left;
    }

    .mt-tablist {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media screen and (max-width:600px) {
    .mt-tablist {
        grid-template-columns: repeat(2, 1fr);
    }
    .mt-tab {
        font-size: 12px;
    }

    .ol-card__body{
        padding: 12px;
    }

    .ol-order{
        padding: 10px;
    }

}