.member_box { width: min(100%, 48rem); margin: 0 auto; }


/* mypage */
.mypage_top { display: grid; grid-template-columns: 1fr 2fr; margin-bottom: 40px; border: 1px solid #ddd5c8; border-radius: 1rem; overflow: hidden; }
.member_summary { padding: 30px; background: #222; color: #fff; }
.member_summary p { margin: 0 0 8px; color: #bbb; font-size: 1.3rem; }
.member_summary h2 { margin: 0; font-size: 2.4rem; }
.member_summary .grade { display: inline-flex; margin-top: 20px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.35); border-radius: 2rem; font-size: 1.2rem; }
.member_numbers { display: grid; grid-template-columns: repeat(3,1fr); }
.member_numbers a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; min-height: 13rem; border-left: 1px solid #eee; }
.member_numbers strong { font-size: 2.4rem; }
.member_numbers span { color: #777; font-size: 1.3rem; }
.mypage_layout { display: grid; grid-template-columns: 20rem 1fr; gap: 5rem; }
.side_menu { border-top: 2px solid #222; }
.side_menu h3 { margin: 0; padding:10px 0; text-align:center; margin-bottom:20px; border-bottom: 1px solid #ddd5c8; font-size: 1.6rem; font-weight:700}
.side_menu a { display: block; padding:5px 0; border-bottom: 1px solid #eee; color: #666; font-size: 1.4rem; }
.side_menu a:hover, .side_menu a.active { color: #111; font-weight: 700; }
.dashboard_grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
.dashboard_card {  padding: 22px; background: rgba(255, 255, 255, .6); border-radius: .8rem; border: 1px solid #ddd5c8;}
.dashboard_card h3 { margin: 0 0 12px; font-size: 1.8rem; font-weight:700}
.dashboard_card p { margin: 0; color: #777; font-size: 1.3rem; }
.dashboard_card strong { display: block; margin-top:10px;   font-size: 2.4rem; }
 



/* order list */
.list_filter { display: flex; align-items: center; gap: .8rem; padding: 18px; border: 1px solid #ddd5c8; background: rgba(255, 255, 255, .6); }
.list_filter .btn { height: 4rem; }
.list_filter .input, .list_filter .select { height: 4rem; width: auto; }
.order_card { margin-top: 20px; border: 1px solid #ddd5c8; border-radius: .8rem; overflow: hidden; }
.order_card_head { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 16px 20px; background: rgba(255, 255, 255, .6); border-bottom: 1px solid #ddd5c8; }
.order_card_head strong { margin-right: 10px; }
.order_card_head span { color: #777; font-size: 1.3rem; }
.order_card_body { display: grid; grid-template-columns: 1fr 16rem; align-items: stretch; }
.order_product { display: flex; align-items: center; gap: 1.8rem; padding: 20px; }
.order_product .product_thumb {width:80px}
.delivery_status { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; border-left: 1px solid #eee; }
.order_product .status { color: var(--point); font-weight: 700; }
.order_product .product_name { font-weight: 600; }
.order_product .product_option { margin-top: 5px; color: #888; font-size: 1.2rem; }
.order_card_body.empty  .product_thumb {display:none}
.order_card_body.empty button {display:none}



/* order detail */
.order_detail_top { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 20px; padding: 20px 24px; border: 1px solid #ddd5c8; border-radius: .8rem; background: rgba(255, 255, 255, .6); }
.order_detail_top strong { font-size: 1.8rem; }
.order_detail_top span { display: block; margin-top: 4px; color: #777; font-size: 1.3rem; }
.delivery_steps { display: grid; grid-template-columns: repeat(5,1fr); margin-bottom: 50px; padding: 25px 10px; border-top: 1px solid #222; border-bottom: 1px solid #ddd5c8; }
.delivery_step { position: relative; text-align: center; color: #aaa; font-size: 1.25rem; }
.delivery_step + .delivery_step:before { content: ""; position: absolute; top: 1.7rem; right: 50%; width: 100%; height: 1px; background: #ddd5c8; z-index: 0; }
.delivery_step .circle { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; margin: 0 auto 8px; border: 1px solid #ccc; border-radius: 50%; background: #fff; font-size: 1.2rem; }
.delivery_step.done, .delivery_step.active { color: #111; font-weight: 700; }
.delivery_step.done .circle, .delivery_step.active .circle { border-color: var(--point); background: var(--point); color: #fff; }
.order_detail_section { margin-top:30px}
.order_detail_section:first-of-type { margin-top: 0; }
.order_detail_section h2 { margin: 0 0 15px; font-size: 2.1rem; }
.order_detail_product { display: grid; grid-template-columns: 1fr 18rem; border-top: 1px solid #222; border-bottom: 1px solid #ddd5c8; }
.order_detail_product .order_product { min-height: 14rem; }
.order_detail_status { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; border-left: 1px solid #eee; text-align: center; }
.order_detail_status strong { color: var(--point); }
.info_table { width: 100%; border-collapse: collapse; border-top: 1px solid #222; }
.info_table th, .info_table td { padding: 16px 18px; border-bottom: 1px solid #ddd5c8; text-align: left; font-size: 1.35rem; }
.info_table th { width: 16rem; background: rgba(255, 255, 255, .6); color: #555; font-weight: 600; }
.payment_box { display: grid; grid-template-columns: 1fr 34rem; border-top: 1px solid #222; border-bottom: 1px solid #ddd5c8; }
.payment_detail { padding: 22px; }
.payment_detail .summary_row { max-width: 54rem; }
.payment_total_box { padding: 22px; border-left: 1px solid #ddd5c8; background: rgba(255, 255, 255, .6); }
.payment_total_box p { margin: 0 0 8px; color: #777; font-size: 1.3rem; }
.payment_total_box strong { font-size: 2.8rem; }
.order_detail_actions { display: flex; justify-content: center; gap: 1rem; margin-top: 40px; }


.withdraw_notice { padding:20px; background:#f7f7f7; font-size:1.4rem; line-height:1.7; color:#666; }
.withdraw_notice strong { display:block;  font-size:1.5rem; font-weight:500; color:#222; }
.withdraw_notice p { margin:0; }


@media (max-width:900px) {
    .mypage_top {grid-template-columns:1fr;margin-bottom:30px;}
    .member_summary {padding:24px;}
    .member_summary h2 {font-size:2rem;}
    .member_numbers a {min-height:9rem;border-left:0;border-top:1px solid #eee;}
    .member_numbers strong {font-size:2rem;}

    .mypage_layout {grid-template-columns:1fr;gap:30px;}
    .side_menu {display:grid;grid-template-columns:repeat(2,1fr);gap:0 20px;}
    .side_menu h3 {grid-column:1/-1;margin-bottom:10px;font-size:1.5rem;}

    .dashboard_card h3 {font-size:1.5rem;}
    .dashboard_card strong {font-size:2rem;}

    .list_filter {flex-wrap:wrap;padding:15px;}
    .list_filter .input,.list_filter .select {flex:1;min-width:140px;width:100%;}

    .order_card_head {align-items:flex-start;gap:12px;padding:14px 16px;}
    .order_card_head strong {display:block;margin:0 0 4px;}
    .order_card_head span {display:block;}
    .order_card_body {grid-template-columns:1fr;}
    .order_product {align-items:flex-start;gap:14px;padding:16px;}
    .order_product .product_thumb {flex:0 0 70px;width:70px;}
    .delivery_status {flex-direction:row;justify-content:space-between;min-height:0;padding:12px 16px;border-top:1px solid #eee;border-left:0;background:#fafafa;}
    .delivery_status .btn {min-width:88px;}

    .order_detail_top {align-items:flex-start;flex-direction:column;padding:16px;}
    .order_detail_top strong {font-size:1.6rem;}
    .order_detail_top .btn {width:100%;}

    .delivery_steps {grid-template-columns:repeat(5,minmax(0,1fr));width:100%;margin-bottom:35px;padding:20px 0;overflow:visible;}
    .delivery_step {min-width:0;font-size:1.05rem;}
    .delivery_step + .delivery_step:before {top:1.4rem;}
    .delivery_step .circle {width:2.8rem;height:2.8rem;margin-bottom:6px;font-size:1rem;}

    .order_detail_section {margin-top:25px;}
    .order_detail_section h2 {margin-bottom:12px;font-size:1.8rem;}
    .order_detail_product {grid-template-columns:1fr;}
    .order_detail_product .order_product {min-height:0;}
    .order_detail_status {flex-direction:row;justify-content:space-between;min-height:0;padding:14px 16px;border-top:1px solid #eee;border-left:0;text-align:left;}
    .order_detail_status span {flex:1;padding:0 10px;}
    .order_detail_status .btn {flex:0 0 auto;}

    .info_table th,.info_table td {padding:13px 12px;}
    .info_table th {width:9rem;}
    .payment_box {grid-template-columns:1fr;}
    .payment_detail {padding:18px 16px;}
    .payment_total_box {padding:18px 16px;border-top:1px solid #ddd5c8;border-left:0;}
    .payment_total_box strong {font-size:2.3rem;}
    .order_detail_actions {margin-top:30px;}
}