/* mbn-home-a.css — 메인 A안 「진단 대시보드형」 + 용도별 흐름 화면 (2026-10-13)
 * 토큰은 assets/onae-theme.css 0절(--vio·--mbx-*)을 그대로 쓴다. 글꼴은 사이트 공통(Pretendard). */
.mbh,.mbf{--h-ink:var(--mbx-ink,#23284A);--h-sub:var(--mbx-sub,#4F5470);--h-line:var(--mbx-line,#E4E3EF);--h-card:#fff;--h-tint:var(--mbx-tint,#F1EEFF);--h-vio:var(--vio,#5A4BD6);--h-vio2:var(--vio-strong,#4536B8);color:var(--h-ink)}
.mbh *,.mbf *{box-sizing:border-box}

/* 사진 띠 + 제목 — 첫 화면 사진(img/ds 6장)을 얇은 띠로 */
.mbh-band{position:relative;overflow:hidden;border-radius:var(--r-m,16px);background:#17123A;color:#fff;padding:20px 22px;display:grid;gap:14px;isolation:isolate}
.mbh-photos{position:absolute;inset:0;z-index:-1}
.mbh-photos i{position:absolute;inset:0;background-size:cover;background-position:center 32%;opacity:0;animation:lpSlide 36s infinite}
.mbh-photos i:first-child{opacity:1}
.mbh-photos i:nth-child(2){animation-delay:6s}.mbh-photos i:nth-child(3){animation-delay:12s}.mbh-photos i:nth-child(4){animation-delay:18s}.mbh-photos i:nth-child(5){animation-delay:24s}.mbh-photos i:nth-child(6){animation-delay:30s}
.mbh-photos::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(15,11,44,.95) 0%,rgba(23,18,58,.9) 45%,rgba(23,18,58,.62) 75%,rgba(15,11,44,.5) 100%)}
.mbh-band h1{margin:0 0 4px;font-size:24px;line-height:1.3;font-weight:800;letter-spacing:-.02em;color:#fff}
.mbh-band p{margin:0;font-size:14.5px;line-height:1.55;color:#E3E0F7;max-width:56ch}
.mbh-grade{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mbh-seg{display:inline-flex;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:var(--r-pill,999px);padding:3px}
.mbh-seg button{min-height:40px;min-width:52px;padding:0 14px;border:0;border-radius:var(--r-pill,999px);background:transparent;color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.mbh-seg button[aria-pressed="true"]{background:#fff;color:var(--h-vio2)}
.mbh-seg button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.mbh-grade output{font-size:13px;color:#E3E0F7;min-width:7em}

/* 4축 진단 지도 */
.mbh-tabs{display:none}
.mbh-mx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start;margin-top:16px}
.mbh-col h2{margin:0 0 10px;padding:0 2px 8px;border-bottom:2px solid var(--h-ink)}
.mbh-col h2 b{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.mbh-col h2 span{display:block;font-size:12.5px;font-weight:500;color:var(--h-sub);margin-top:1px}
.mbh-list{display:grid;background:var(--h-card);border:1px solid var(--h-line);border-radius:var(--r-m,16px);overflow:hidden}
.mbh-dx{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font:inherit;color:inherit;background:transparent;border:0;border-top:1px solid var(--h-line);min-height:52px;padding:8px 12px;cursor:pointer}
.mbh-dx:first-child{border-top:0}
.mbh-dx:hover{background:var(--h-tint)}
.mbh-dx:focus-visible{outline:3px solid var(--focus,#0B6E6B);outline-offset:-3px}
.mbh-dx .t{flex:1;min-width:0}
.mbh-dx .t b{display:block;font-size:14.5px;font-weight:700;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
.mbh-dx .t span{display:block;font-size:12.5px;color:var(--h-sub);line-height:1.4}
.mbh-tag{flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--h-vio2);background:var(--h-tint);border-radius:var(--r-pill,999px);padding:3px 8px;white-space:nowrap}
.mbh-tag.is-wait{color:var(--h-sub);background:#EEEEF4}
.mbh-dx.is-wait .t b{font-weight:600;color:var(--h-sub)}
.mbh-dx.dim{opacity:.34}
.mbh-dx.dim:hover{opacity:.7}

/* 진단 뒤 받는 것 */
.mbh-after{margin-top:22px;background:var(--h-card);border:1px solid var(--h-line);border-radius:var(--r-m,16px);padding:14px 18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.mbh-after h2{font-size:15px;font-weight:800;margin:0}
.mbh-after ol{list-style:none;display:flex;gap:6px 14px;margin:0;padding:0;counter-reset:a;flex-wrap:wrap}
.mbh-after li{counter-increment:a;font-size:14px;display:flex;align-items:center;gap:6px}
.mbh-after li::before{content:counter(a);width:20px;height:20px;border-radius:50%;background:var(--h-tint);color:var(--h-vio2);font-size:11.5px;font-weight:800;display:grid;place-items:center}
.mbh-after a{margin-left:auto;color:var(--h-vio2);font-weight:700;font-size:14px;min-height:44px;display:inline-flex;align-items:center}

/* 보조 줄: 맛보기·자료실·연구몰·다른 서비스 */
.mbh-extra{margin-top:28px;padding-top:16px;border-top:1px solid var(--h-line)}
.mbh-extra h2{font-size:14px;font-weight:700;color:var(--h-sub);margin:0 0 10px}
.mbh-extra ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--h-line);border-radius:var(--r-m,16px);background:var(--h-card);overflow:hidden}
.mbh-extra li{padding:12px 16px;border-left:1px solid var(--h-line)}
.mbh-extra li:first-child{border-left:0}
.mbh-extra a{font-weight:700;font-size:14.5px;text-decoration:none;color:var(--h-ink);display:inline-flex;align-items:center;min-height:32px}
.mbh-extra a small{font-weight:500;color:var(--h-sub);margin-left:4px}
.mbh-extra a:hover{color:var(--h-vio)}
.mbh-extra p{margin:2px 0 0;font-size:12.5px;color:var(--h-sub);line-height:1.45}
.mbh-lim{margin:14px 0 0;font-size:12.5px;color:var(--h-sub);max-width:72ch;line-height:1.6}

/* PC: 홈은 본문 폭을 넓혀 네 열이 한 화면에 들어오게 */
@media (min-width:1024px){
 .app:has(> #view > .mbh){max-width:none!important;padding:22px 28px 64px!important}
 .mbh-band{grid-template-columns:minmax(0,1fr) auto;align-items:end;padding:18px 24px}
}
@media (min-width:761px) and (max-width:1023px){
 .mbh-mx{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mbh-extra ul{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mbh-extra li:nth-child(3){border-left:0}
 .mbh-extra li:nth-child(n+3){border-top:1px solid var(--h-line)}
}
/* 모바일: 4축 탭 + 한 축씩 */
@media (max-width:760px){
 .mbh-band{padding:16px;gap:12px;border-radius:var(--r-m,16px)}
 .mbh-band h1{font-size:21px}
 .mbh-band p{font-size:13.5px}
 .mbh-seg{display:flex;width:100%}.mbh-seg button{flex:1;min-width:0;min-height:44px;padding:0 6px}
 .mbh-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;position:sticky;top:0;z-index:5;background:var(--mbx-page,#F6F6FB);padding:10px 0;margin-top:4px}
 .mbh-tabs button{min-height:48px;border:1.5px solid var(--h-line);background:var(--h-card);border-radius:var(--r-s,10px);font:inherit;font-size:16px;font-weight:800;color:var(--h-ink);cursor:pointer}
 .mbh-tabs button[aria-selected="true"]{border-color:var(--h-vio);background:var(--h-tint);color:var(--h-vio2)}
 .mbh-tabs button:focus-visible{outline:3px solid var(--focus,#0B6E6B);outline-offset:2px}
 .mbh-mx{display:block;margin-top:2px}
 .mbh-col{display:none}.mbh-col.on{display:block}
 .mbh-col h2{border-bottom-width:1px}
 .mbh-col h2 b{display:none}
 .mbh-dx{min-height:58px;padding:10px 14px}
 .mbh-after{padding:14px 16px}.mbh-after a{margin-left:0}
 .mbh-extra ul{grid-template-columns:1fr}
 .mbh-extra li{border-left:0;border-top:1px solid var(--h-line)}.mbh-extra li:first-child{border-top:0}
}

/* ---------------- 용도별 흐름 화면 ---------------- */
.mbf{max-width:880px}
.mbf-pick{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px}
.mbf-pick a{min-height:40px;display:inline-flex;align-items:center;padding:0 14px;border:1.5px solid var(--h-line);border-radius:var(--r-pill,999px);background:var(--h-card);font-weight:700;font-size:14px;color:var(--h-ink);text-decoration:none}
.mbf-pick a[aria-current="page"]{border-color:var(--h-vio);background:var(--h-tint);color:var(--h-vio2)}
.mbf-who{margin:0 0 2px;font-size:13.5px;font-weight:700;color:var(--h-vio2)}
.mbf-head h1{margin:0 0 6px;font-size:26px;line-height:1.3}
.mbf-head p{margin:0;color:var(--h-sub);font-size:15px;max-width:60ch}
.mbf-steps{list-style:none;margin:18px 0 8px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:s;border:1px solid var(--h-line);border-radius:var(--r-m,16px);background:var(--h-card);overflow:hidden}
.mbf-steps li{counter-increment:s;border-left:1px solid var(--h-line)}
.mbf-steps li:first-child{border-left:0}
.mbf-steps a{display:flex;align-items:center;gap:8px;min-height:52px;padding:8px 12px;font-weight:700;font-size:14px;color:var(--h-ink);text-decoration:none}
.mbf-steps a::before{content:counter(s);flex:0 0 22px;height:22px;border-radius:50%;background:var(--h-vio);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
.mbf-steps a:hover{background:var(--h-tint)}
.mbf-sec{margin-top:26px;scroll-margin-top:80px}
.mbf-sec h2{display:flex;align-items:center;gap:10px;font-size:19px;margin:0 0 6px}
.mbf-sec h2 i{font-style:normal;flex:0 0 28px;height:28px;border-radius:50%;border:2px solid var(--h-vio);color:var(--h-vio2);font-size:14px;font-weight:800;display:grid;place-items:center}
.mbf-p{margin:0 0 12px;color:var(--h-sub);font-size:14.5px;line-height:1.6;max-width:64ch}
.mbf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.mbf-grid .mbh-dx:nth-child(2){border-top:0}
.mbf-grid .mbh-dx:nth-child(even){border-left:1px solid var(--h-line)}
.mbf-bundles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mbf-bundle h3{margin:0 0 6px;font-size:15px}
.mbf-more{margin:8px 0 0;font-size:14px}
.mbf-more a,.mbf-foot a{color:var(--h-vio2);font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.mbf-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mbf-card{background:var(--h-card);border:1px solid var(--h-line);border-radius:var(--r-m,16px);padding:16px}
.mbf-card h3{margin:0 0 4px;font-size:16px}
.mbf-card p{margin:0 0 12px;font-size:14px;color:var(--h-sub);line-height:1.6}
.mbf-card .btn{width:auto;display:inline-flex;min-height:44px}
.mbf-note{margin:12px 0 0;padding:10px 14px;border-radius:var(--r-s,10px);background:#FFF6E8;border:1px solid #F3D7AE;color:#6B3F0E;font-size:13.5px;line-height:1.6}
.mbf-next{margin:0;padding:0 0 0 20px;font-size:15px;line-height:1.8}
.mbf-foot{margin:30px 0 0;padding-top:14px;border-top:1px solid var(--h-line);font-size:14px;color:var(--h-sub)}
@media (max-width:760px){
 .mbf-head h1{font-size:22px}
 .mbf-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mbf-steps li:nth-child(3){border-left:0}
 .mbf-steps li:nth-child(n+3){border-top:1px solid var(--h-line)}
 .mbf-grid,.mbf-bundles,.mbf-cards{grid-template-columns:1fr}
 .mbf-grid .mbh-dx:nth-child(2){border-top:1px solid var(--h-line)}
 .mbf-grid .mbh-dx:nth-child(even){border-left:0}
}
/* 상단 운영 바(PC 셸) — 이용 안내·문의·내 기록·관리자 */
.mbn-ops{display:flex;align-items:center;gap:2px;justify-self:end}
.mbn-ops a,.mbn-ops button{font:inherit;font-size:14px;font-weight:700;color:var(--mbn-item,#4C5170);background:transparent;border:0;cursor:pointer;padding:8px 10px;border-radius:var(--r-s,10px);text-decoration:none;min-height:40px;display:inline-flex;align-items:center;white-space:nowrap}
.mbn-ops a:hover,.mbn-ops button:hover{background:var(--mbn-item-hv,#F4F2FE);color:var(--vio-text,#5A4BD6)}
.mbn-ops .sep{width:1px;height:18px;background:var(--mbn-line,#EAE7F5);margin:0 6px}
/* 사이드바(레일) 용도 항목의 한 줄 설명 */
.mbn-item small{display:block;font-size:11.5px;font-weight:500;color:var(--mbn-gk,#5F6584);margin-top:1px}
.mbn-item.sub{padding-left:28px!important;font-weight:600}
/* 바닥글 검색 랜딩 링크 */
.foot .seofoot{margin-top:8px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px}
.foot .seofoot a{color:#707593;font-weight:600}
@media (prefers-reduced-motion:reduce){.mbh-photos i{animation:none}.mbh-photos i:not(:first-child){opacity:0}}
@media print{.mbh-photos,.mbh-tabs,.mbh-extra{display:none}.mbh-band{background:#fff;color:#000}}
@media (prefers-color-scheme:dark){
 .mbh,.mbf{--h-ink:#E6E9F5;--h-sub:#AEB4CC;--h-line:#2B3147;--h-card:#171B2B;--h-tint:#262B48;--h-vio2:#B9AFFF}
 .mbh-tag.is-wait{background:#262B3B}
 .mbh-tabs{background:transparent}
 .mbf-note{background:#3A2E11;border-color:#5A4720;color:#FFE2A8}
}

/* 진단 카드 사진(기존 진단 카드 사진 재사용). 줄 높이를 늘리지 않도록 행 안 정사각 썸네일. */
.mbh-ph{flex:0 0 auto;width:40px;height:40px;border-radius:9px;overflow:hidden;display:block;position:relative}
.mbh-ph img{width:100%;height:100%;object-fit:cover;display:block}
.mbh-dx.is-wait .mbh-ph{filter:grayscale(.7);opacity:.75}
@media (max-width:760px){.mbh-ph{width:44px;height:44px}}