/* 전용 메뉴·마이페이지 프레임. 대상은 v2/lib/page_frame.lib.php, 너비 정본은 디자인 가이드 3-2. */
@media screen {
body#wrap.v2-work-frame {--work-frame-max:1600px;--work-frame-gutter:min(var(--page-x,16px),24px);width:100%;max-width:100%;}
body#wrap.v2-work-frame.v2-read-frame {--work-frame-max:var(--frame-narrow,720px);}
body#wrap.v2-work-frame #header {left:calc(var(--side-w,0px) + (100% - var(--side-w,0px)) / 2);width:calc(100% - var(--side-w,0px) - var(--work-frame-gutter) * 2);max-width:var(--work-frame-max);}
body#wrap.v2-work-frame :is(#ptp[data-scope="edufact"],#dbip,#dbi_hub,#jobOnboarding,#jobTeam,#reviewer-dash) {width:calc(100% - var(--work-frame-gutter) * 2);max-width:var(--work-frame-max);margin-inline:auto;padding-inline:0;}
/* 교수 연구실은 공통 메뉴가 꺼졌을 때 자체 280px 메뉴 자리를 먼저 뺀다. */
body#wrap.v2-work-frame #proDashboard {box-sizing:border-box;}
body#wrap.v2-work-frame #proDashboard > .main-content {flex:0 1 auto;min-width:0;width:calc(100% - var(--work-frame-gutter) * 2);max-width:var(--work-frame-max);margin-inline:auto;padding-inline:0;}
body#wrap.v2-work-frame #proDashboard .stats-grid {grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));}
body#wrap.v2-work-frame #proDashboard .video-grid {max-width:none;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));}
body#wrap.v2-work-frame #proDashboard .hero-title {max-width:var(--frame-narrow,720px);margin-inline:auto;font-size:var(--text-display,32px);}
/* 신청자 카드와 온보딩 통계는 칸의 최소 폭으로 줄바꿈한다. */
body#wrap.v2-work-frame #dbi_hub {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(max(480px,calc(50% - var(--space-4,16px) / 2)),100%),1fr));gap:var(--space-4,16px);align-items:start;}
body#wrap.v2-work-frame #dbi_hub > :is(.dh-head,.dh-comp) {grid-column:1 / -1;}
body#wrap.v2-work-frame #dbi_hub > .dh-card {min-width:0;margin-bottom:0;}
body#wrap.v2-work-frame #dbi_hub .dh-stats {grid-template-columns:repeat(auto-fit,minmax(min(100px,100%),1fr));}
body#wrap.v2-work-frame :is(#jobOnboarding .jo-grid,#jobTeam .jt-grid) {grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));}
body#wrap.v2-work-frame #reviewer-dash .rd-todo-list {grid-template-columns:repeat(auto-fit,minmax(min(max(300px,calc(50% - 4px)),100%),1fr));}
body#wrap.v2-work-frame #reviewer-dash .rd-todo-item {min-width:0;}
body#wrap.v2-work-frame #reviewer-dash .rd-progress {grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));}
/* 표·도구는 프레임 전체, 긴 설명·이론 읽기는 좁은 프레임. */
body#wrap.v2-work-frame :is(#dbip .dp-theory,#dbip .dp-qbody) {max-width:var(--frame-narrow,720px);margin-inline:auto;overflow-x:auto;}
body#wrap.v2-work-frame :is(#dbi_hub .dh-head p,#dbi_hub .dh-card p,#jobOnboarding .jo-head p,#jobTeam .jt-head p,#reviewer-dash .rd-item-q) {max-width:var(--frame-narrow,720px);}
/* 마이페이지: 프로필·통계와 메뉴·학습의 2단 구조를 가용 폭으로 판정한다. */
body#wrap.v2-work-frame #mypage_main #mypage {width:calc(100% - var(--work-frame-gutter) * 2);max-width:var(--work-frame-max);margin-inline:auto;}
body#wrap.v2-work-frame #mypage_main #mypage .mypage {width:100%;max-width:var(--frame-narrow,720px);margin-inline:auto;}
body#wrap.v2-work-frame #mypage_main .study-item :is(.study-title,.study-detail) {min-width:0;overflow-wrap:anywhere;}
body#wrap.v2-work-frame #mypage_main .study-item {min-width:0;}
body#wrap.v2-work-frame #mypage_main .study-item .study-detail {font-size:13px;line-height:1.5;}
body#wrap.v2-work-frame #mypage_main .peer-learning-pulse__detail {font-size:13px;line-height:1.5;}
/* 결제·주문과 메소 목록: 같은 항목은 공간에 맞춰 나란히, 긴 설명은 좁게. */
body#wrap.v2-work-frame #myOrders .order-container,body#wrap.v2-work-frame #mesoMarket .meso-container {box-sizing:border-box;width:calc(100% - var(--work-frame-gutter) * 2);max-width:var(--work-frame-max);margin-inline:auto;padding-inline:0;}
body#wrap.v2-work-frame #myOrders .order-list {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));gap:var(--space-4,16px);align-items:start;}
body#wrap.v2-work-frame #myOrders .order-card {min-width:0;}
body#wrap.v2-work-frame #myOrders :is(.order-title,.upg-copy,.vo-desc,.sub-cancel-note) {max-width:var(--frame-narrow,720px);overflow-wrap:anywhere;}
body#wrap.v2-work-frame #myOrders .empty-state {grid-column:1 / -1;}
body#wrap.v2-work-frame #mesoMarket .meso-shop-list {grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));}
body#wrap.v2-work-frame #mesoMarket :is(.payment-methods,.charge-options,.meso-detail) {max-width:var(--frame-narrow,720px);margin-inline:auto;}
body#wrap.v2-work-frame #mesoMarket .tab-menu {gap:var(--space-2,8px);}
/* 회원정보·내 기여·인증·출금·탈퇴·약관은 좁은 폭(--frame-narrow: 태블릿 720 · PC 960) 입력/읽기 프레임이다. */
body#wrap.v2-work-frame :is(#mypageEdit,#my_contribution,#withdrawConfirm,#certi) {box-sizing:border-box;width:calc(100% - var(--work-frame-gutter) * 2);max-width:var(--work-frame-max);margin-inline:auto;padding-inline:0;}
body#wrap.v2-work-frame #mypageEdit .mypageEdit {width:100%;max-width:none;padding-inline:0;}
body#wrap.v2-work-frame #mypageEdit .section-card {padding:var(--work-frame-gutter);}
body#wrap.v2-work-frame #mypageEdit .field-input {box-sizing:border-box;min-width:0;min-height:44px;font-size:16px;}
body#wrap.v2-work-frame #mypageEdit .field-desc {font-size:13px;line-height:1.5;}
body#wrap.v2-work-frame #mypageEdit select.field-input {height:44px!important;font-size:16px!important;padding-right:40px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 12px center;background-size:20px;background-repeat:no-repeat;}
body#wrap.v2-work-frame .withdraw-container {box-sizing:border-box;width:calc(100% - var(--work-frame-gutter) * 2);max-width:var(--work-frame-max);margin-inline:auto;}
body#wrap.v2-work-frame #cs_center {width:calc(100% - var(--side-w,0px) - var(--work-frame-gutter) * 2);max-width:var(--work-frame-max);left:var(--side-w,0px);}
body#wrap.v2-work-frame #mocktest .mocktest {box-sizing:border-box;width:calc(100% - var(--work-frame-gutter) * 2);max-width:var(--work-frame-max);margin-inline:auto;padding-inline:0;overflow-wrap:anywhere;}
body#wrap.v2-work-frame #mocktest .mymerci-policy :is(img,iframe) {max-width:100%;}
body#wrap.v2-work-frame #mocktest .mymerci-policy table {display:block;overflow-x:auto;}
body#wrap.v2-work-frame #mocktest .mymerci-policy p {word-break:keep-all;overflow-wrap:anywhere;text-align:start;}
body#wrap.v2-work-frame #certi .certi_wrap {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:var(--space-6,24px);width:100%;max-width:none;margin-inline:auto;padding-inline:0;align-items:start;}
body#wrap.v2-work-frame #certi .certi_wrap :is(.with,.certification-container,.button) {width:100%;max-width:none;min-width:0;}
body#wrap.v2-work-frame #certi :is(.certi,.certi_form) {padding-bottom:var(--page-bottom,100px);}
body#wrap.v2-work-frame #certi .certi_form {width:100%;padding-inline:0;}
body#wrap.v2-work-frame #certi .form_wrap {width:100%;max-width:520px;}
body#wrap.v2-work-frame #certi :is(.form dt .txt,.certi_popup .txt) {font-size:13px;line-height:1.5;}
body#wrap.v2-work-frame #certi .certi_wrap .button a::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");}
body#wrap.v2-work-frame #withdrawConfirm :is(.form-title .required,.as-list .as-end,.loss-label) {font-size:13px;line-height:1.5;}
/* 설정 오버레이는 메뉴까지 덮고, 내용과 머리는 같은 좁은 프레임으로 맞춘다. */
body#wrap.v2-work-frame #settingsOverlay {box-sizing:border-box;padding-left:var(--side-w,0px);}
body#wrap.v2-work-frame #settingsOverlay .settings-body {box-sizing:border-box;width:calc(100% - var(--work-frame-gutter) * 2);max-width:var(--frame-narrow,720px);padding-top:var(--header-h,52px);}
body#wrap.v2-work-frame #settingsOverlay #header {max-width:var(--frame-narrow,720px);}
body#wrap.v2-work-frame #settingsOverlay :is(.settings-note,.settings-row small,.settings-version span,.settings-sub-title small) {font-size:13px;line-height:1.5;}
}
@container mypage (min-width:900px) {
body#wrap.v2-work-frame #mypage_main #mypage .mypage {max-width:var(--work-frame-max);}
/* 메뉴는 2열 격자. 왼쪽 칸(.mp-menu-l)=실사용 메뉴·로그아웃, 오른쪽 칸(.mp-menu-r)=최근 본 상품·에듀팩토리 고객센터·관리자 테스트. 칸마다 열만 고정하고 행은 자동 배치라 같은 줄의 두 칸(마이메르시 ↔ 에듀팩토리 고객센터)이 같은 행을 공유한다. 오른쪽 칸이 하나도 없으면(.link-flat--single) 1열. */
body#wrap.v2-work-frame #mypage_main .link-flat {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-4,16px);align-items:start;}
body#wrap.v2-work-frame #mypage_main .link-flat.link-flat--single {grid-template-columns:minmax(0,1fr);}
body#wrap.v2-work-frame #mypage_main .link-flat > .mp-menu-l {grid-column:1;min-width:0;}
body#wrap.v2-work-frame #mypage_main .link-flat > .mp-menu-r {grid-column:2;min-width:0;}
body#wrap.v2-work-frame #mypage_main .link-flat > .mp-menu-r > .link_title:first-child {margin-top:20px;}
body#wrap.v2-work-frame #mypage_main .link-flat .study-item {border-bottom:1px solid var(--border-light,#f1f5f9);}
}
@media screen and (min-width:769px) {
body#wrap.v2-work-frame:not(.v2-side-nav) #proDashboard {padding-left:280px;}
}
@media screen and (min-width:769px) and (max-width:879px) {
body#wrap.v2-work-frame:not(.v2-side-nav) #proDashboard {--work-frame-gutter:16px;}
}
