/* my:ME Engine 근거 패널 — 앱 DOM과 분리된 레이어.
   모든 선택자는 .mme- 로 네임스페이스한다.
   색·서체·반경은 app.html / app-design.css 토큰을 참조하고, 토큰 부재 시 값으로 대체한다.

   ── 앱 CSS 접점 1건 ────────────────────────────────────────────────
   .mme-open .stage — 넓은 화면에서 패널이 도킹될 때 앱 스테이지 가용 폭만 좁힌다.
   런처는 #view 와 #tabs 사이의 흐름 요소라 자기 자리를 차지하므로,
   .phone .scroll 의 하단 여백 보상 규칙을 두지 않는다. 앱의 .studio-* 클래스는
   변경하지 않는다.
   예외 1건: app.html 334행의 .phone.intro-mode 는 헤더·탭바를 감추므로 런처 띠도
   같은 조건에서 감춘다.

   ── 가시성 ─────────────────────────────────────────────────────────
   패널·가림막은 element.hidden 으로 여닫는다. .mme-panel 의 display:flex 는
   작성자 규칙이라 UA 기본 [hidden]{display:none} 을 이기므로, 앱 CSS 의 전역
   [hidden] 규칙에 기대지 않고 아래에서 직접 규정한다. */

:root{
  --mme-w:384px;
  /* 흰 배경 대비 6.6:1. WCAG 2.2 SC 1.4.11(비문자 대비 3:1) 충족.
     종전 #78A6FF 는 2.4:1 로 미달이었다. */
  --mme-focus:#1D4FD8;
}

/* 이 레이어의 가시성은 스스로 통제한다. 벤더 CSS 유무와 무관하게 동작해야 한다. */
.mme-root [hidden]{display:none!important}
.mme-panel[hidden],.mme-backdrop[hidden]{display:none!important}

.mme-root{
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',
    'Noto Sans KR','Malgun Gothic',system-ui,sans-serif;
  color:var(--ink,#0A1633);
  letter-spacing:-.01em;
}
.mme-root *{box-sizing:border-box}
/* font 단축 속성은 크기·굵기까지 inherit 으로 되돌린다. 개별 속성만 상속시키고,
   런처는 선택자 특정도를 올려 자체 크기·굵기를 유지한다. */
.mme-root button{
  font-family:inherit;font-size:inherit;font-weight:inherit;font-style:inherit;
  line-height:inherit;color:inherit;cursor:pointer;
}
.mme-root :focus-visible{outline:3px solid var(--mme-focus);outline-offset:2px}

/* ── 런처 띠 — #view 와 #tabs 사이의 흐름 요소 ───────── */
.mme-dock{flex:0 0 auto;width:100%;max-width:100%}
.phone.intro-mode .mme-dock{display:none}
.mme-root .mme-launcher{
  display:flex;align-items:center;gap:8px;width:100%;min-height:46px;
  padding:0 18px;border:0;border-top:1px solid var(--line-2,#E7ECF5);
  background:var(--surface,#fff);color:var(--ink-2,#2D3B58);
  font-size:13px;font-weight:600;line-height:1.25;text-align:left;
}
.mme-root .mme-launcher:hover{color:var(--brand,#0B5CFB)}
.mme-launcher-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mme-launcher-state{flex:0 0 auto;font-size:11.5px;font-weight:400;color:var(--ink-3,#52617D)}
.mme-launcher-act{
  flex:0 0 auto;display:flex;align-items:center;gap:3px;
  font-size:11.5px;font-weight:600;color:var(--ink-4,#71809D);
}
.mme-launcher-act:before{content:'·';margin-right:3px;color:var(--line,#D5DEEE)}
.mme-launcher[aria-expanded="true"] .mme-launcher-act .mme-caret{transform:rotate(180deg)}
.mme-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:#B4BECD;box-shadow:0 0 0 3px rgba(180,190,205,.22);
}
.mme-dot.is-on{background:var(--ok,#0E9F6E);box-shadow:0 0 0 3px rgba(14,159,110,.18)}

/* 방어 경로 — .phone / #tabs 를 찾지 못한 구성에서만 적용된다. */
.mme-dock.mme-dock-float{
  position:fixed;left:14px;right:14px;z-index:2100;
  bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
}
.mme-dock-float .mme-launcher{
  border:1px solid var(--line,#D5DEEE);border-radius:12px;
  box-shadow:0 8px 24px rgba(16,38,92,.16);
}

/* ── 배경 가림막 (시트 모드 전용) ────────────────────── */
.mme-backdrop{
  position:fixed;inset:0;z-index:1990;border:0;padding:0;
  background:rgba(10,22,60,.36);
}

/* ── 패널 기본형: 좁은 화면의 하단 시트 ─────────────── */
.mme-panel{
  position:fixed;left:0;right:0;bottom:0;z-index:2000;
  display:flex;flex-direction:column;
  max-height:78dvh;
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--surface,#fff);color:var(--ink,#0A1633);
  border:1px solid var(--line-2,#E7ECF5);border-bottom:0;
  border-radius:20px 20px 0 0;
  box-shadow:0 -18px 60px rgba(16,38,92,.18);
  animation:mme-rise .18s ease-out;
}
.mme-head{
  display:flex;align-items:flex-start;gap:12px;flex-shrink:0;
  padding:16px 18px 12px;border-bottom:1px solid var(--line-2,#E7ECF5);
}
.mme-head>div{flex:1;min-width:0}
.mme-eyebrow{margin:0;font-size:11.5px;letter-spacing:1.4px;font-weight:600;color:var(--ink-4,#71809D)}
.mme-title{margin:5px 0 0;font-size:17px;font-weight:700;letter-spacing:-.4px;line-height:1.3}
/* app.html --tap:56px / app-design.css --tap:50px 기준의 하한을 지킨다.
   34px 은 두 기준 모두에 미달했다. */
.mme-close{
  width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;
  border:1px solid var(--line-2,#E7ECF5);border-radius:13px;
  background:var(--surface-2,#F3F6FB);color:var(--ink-3,#52617D);
}
.mme-close:hover{color:var(--ink,#0A1633);border-color:var(--line,#D5DEEE)}
.mme-note{
  margin:0;flex-shrink:0;padding:10px 18px;font-size:11.5px;line-height:1.6;
  color:var(--ink-3,#52617D);background:var(--surface-2,#F3F6FB);
  border-bottom:1px solid var(--line-2,#E7ECF5);
}
.mme-body{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:16px 18px 24px;scrollbar-width:thin;scrollbar-color:#DFE6F0 transparent;
}

/* ── 넓은 화면: 우측 도킹 사이드 패널 ───────────────── */
@media (min-width:1200px){
  .mme-backdrop{display:none}
  .mme-panel{
    top:0;bottom:0;right:0;left:auto;width:var(--mme-w);max-height:none;
    padding-bottom:0;border:1px solid var(--line-2,#E7ECF5);border-right:0;border-radius:0;
    box-shadow:-18px 0 60px rgba(16,38,92,.12);
    animation:mme-slide .2s ease-out;
  }
  /* 앱 스테이지가 패널에 가리지 않도록 가용 폭만 좁힌다. 앱 DOM은 그대로 둔다. */
  .mme-open .stage{padding-right:calc(var(--mme-w) + 20px);transition:padding-right .2s ease}
}

/* ── 구역 공통 ───────────────────────────────────────── */
.mme-sec{margin:0 0 18px}
.mme-sec:last-child{margin-bottom:0}
.mme-sec-h{
  display:flex;align-items:baseline;gap:8px;margin:0 0 9px;
  font-size:12px;font-weight:700;color:var(--ink-2,#2D3B58);
}
.mme-sec-h small{margin-left:auto;font-size:11.5px;font-weight:400;color:var(--ink-4,#71809D);font-variant-numeric:tabular-nums}
.mme-muted{margin:0;font-size:11.5px;line-height:1.6;color:var(--ink-3,#52617D)}
/* 구역 설명. 척도 기준과 분모 정의를 밝힌다. */
.mme-sec-note{
  margin:0 0 9px;padding:7px 10px;font-size:11.5px;line-height:1.55;
  color:var(--ink-3,#52617D);background:var(--surface-2,#F3F6FB);
  border:1px solid var(--line-2,#E7ECF5);border-radius:9px;
}

/* ── 상단 요약 ───────────────────────────────────────── */
.mme-sum{
  padding:14px 15px;border:1px solid var(--line-2,#E7ECF5);border-radius:16px;
  background:linear-gradient(135deg,#EFF4FF 0%,#F7F9FF 100%);
}
.mme-sum-top{display:flex;align-items:baseline;gap:7px}
.mme-score{
  font-size:42px;font-weight:700;line-height:1.05;letter-spacing:-2px;
  font-variant-numeric:tabular-nums;color:var(--brand,#0B5CFB);
}
.mme-score-unit{font-size:12px;color:var(--ink-3,#52617D)}
.mme-grade{
  margin-left:auto;min-width:48px;padding:6px 10px;text-align:center;
  border:1px solid #C9D9FA;border-radius:11px;background:#fff;
  font-size:15px;font-weight:700;color:var(--brand-700,#0A4AD0);
}
.mme-kv{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px;
  margin:14px 0 0;padding:12px 0 0;border-top:1px solid #D7E3FA;
}
.mme-kv>div{min-width:0}
.mme-kv dt{margin:0;font-size:11.5px;color:var(--ink-4,#71809D)}
.mme-kv dd{
  margin:3px 0 0;font-size:13px;font-weight:600;color:var(--ink-2,#2D3B58);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}

/* ── 항목별 기여도 ───────────────────────────────────── */
.mme-axis{padding:10px 0;border-bottom:1px solid var(--line-2,#E7ECF5)}
.mme-axis:last-child{border-bottom:0;padding-bottom:0}
.mme-axis-top{display:flex;align-items:baseline;gap:8px}
.mme-axis-name{flex:1;min-width:0;font-size:12.5px;font-weight:600}
.mme-axis-val{font-size:12.5px;font-weight:700;color:var(--ink-2,#2D3B58);font-variant-numeric:tabular-nums}
.mme-axis-val small{font-size:11.5px;font-weight:400;color:var(--ink-4,#71809D)}
.mme-bar{height:6px;margin:8px 0 0;border-radius:6px;background:var(--surface-2,#F3F6FB);overflow:hidden}
.mme-bar>span{display:block;height:100%;border-radius:inherit;background:var(--brand,#0B5CFB)}
/* 도달 가능 상한이 0이라 비율을 만들 수 없는 항목의 대체 막대. */
.mme-bar.is-na{background:repeating-linear-gradient(135deg,#EDF1F8 0 5px,#F7F9FC 5px 10px)}
.mme-axis-raw{margin:7px 0 0;font-size:11.5px;line-height:1.55;color:var(--ink-3,#52617D);overflow-wrap:anywhere}
.mme-axis-adj{margin:4px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink-4,#71809D);font-variant-numeric:tabular-nums}

/* ── 하위 항목 (보험 subFactors) ─────────────────────── */
.mme-sub{
  margin:8px 0 0;border:1px solid var(--line-2,#E7ECF5);border-radius:10px;
  background:var(--surface-2,#F3F6FB);
}
.mme-sub>summary{
  display:flex;align-items:center;gap:6px;padding:7px 10px;list-style:none;
  font-size:11.5px;font-weight:600;color:var(--ink-3,#52617D);cursor:pointer;
}
.mme-sub>summary::-webkit-details-marker{display:none}
.mme-sub>summary:focus-visible{outline:3px solid var(--mme-focus);outline-offset:-3px;border-radius:10px}
.mme-sub[open]>summary{border-bottom:1px solid var(--line-2,#E7ECF5)}
.mme-sub[open]>summary .mme-caret{transform:rotate(180deg)}
.mme-sub-list{padding:2px 10px}
.mme-sub-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:6px 0;border-bottom:1px solid var(--line-2,#E7ECF5);
}
.mme-sub-row:last-child{border-bottom:0}
.mme-sub-row>span{flex:1;min-width:0;font-size:11.5px;line-height:1.5;color:var(--ink-3,#52617D);overflow-wrap:anywhere}
.mme-sub-row>b{flex-shrink:0;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.mme-sub-note{margin:0;padding:8px 10px;font-size:11px;line-height:1.5;color:var(--ink-4,#71809D);border-top:1px solid var(--line-2,#E7ECF5)}

/* ── 칩·항목 목록 ────────────────────────────────────── */
.mme-chips{display:flex;flex-wrap:wrap;gap:6px}
.mme-chip{
  padding:5px 10px;border:1px solid var(--line-2,#E7ECF5);border-radius:9px;
  background:var(--surface-2,#F3F6FB);color:var(--ink-3,#52617D);font-size:11.5px;
}
.mme-chip small{font-size:11px;color:var(--ink-4,#71809D)}
.mme-item{
  display:flex;align-items:flex-start;gap:9px;margin-bottom:6px;padding:10px 11px;
  border:1px solid var(--line-2,#E7ECF5);border-radius:12px;background:#fff;
}
.mme-item:last-child{margin-bottom:0}
.mme-item>div{flex:1;min-width:0}
.mme-item b{display:block;font-size:12px;font-weight:600;line-height:1.45}
.mme-item p{margin:4px 0 0;font-size:11.5px;line-height:1.55;color:var(--ink-3,#52617D);overflow-wrap:anywhere}
.mme-penalty{
  flex-shrink:0;font-size:12px;font-weight:700;
  color:var(--danger,#D93855);font-variant-numeric:tabular-nums;
}
.mme-tag{
  display:inline-block;flex-shrink:0;padding:3px 8px;border:1px solid;border-radius:7px;
  font-size:11.5px;font-weight:700;letter-spacing:.2px;white-space:nowrap;
}
/* 엔진이 내보내는 severity 는 'review'·'info' 2종이다. review 는 심사를 유발하므로
   경고로, info 는 참고정보로 구분한다. */
.mme-tag.is-review{color:#8A5A12;background:var(--warn-bg,#FDF6E7);border-color:#EDD9AE}
.mme-tag.is-info{color:#3C5378;background:var(--surface-2,#F3F6FB);border-color:var(--line,#D5DEEE)}

/* 엔진 원문(한국어) 표식. en 모드에서만 출력된다. */
.mme-src{
  display:inline-block;margin-left:5px;padding:0 4px;border:1px solid var(--line,#D5DEEE);
  border-radius:5px;background:var(--surface-2,#F3F6FB);color:var(--ink-4,#71809D);
  font-size:9.5px;font-weight:700;letter-spacing:.4px;line-height:1.5;vertical-align:1px;
}

/* ── 수치 행 (상환여력) ──────────────────────────────── */
.mme-rows{border:1px solid var(--line-2,#E7ECF5);border-radius:14px;overflow:hidden}
.mme-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:10px 12px;border-bottom:1px solid var(--line-2,#E7ECF5);font-size:12px;
}
.mme-row:last-child{border-bottom:0}
.mme-row>span{color:var(--ink-3,#52617D)}
.mme-row>b{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.mme-row-note{
  display:block;padding:10px 12px;border-top:1px solid var(--line-2,#E7ECF5);
  background:var(--surface-2,#F3F6FB);font-size:11.5px;line-height:1.6;color:var(--ink-3,#52617D);
}

/* ── 심사 필요 표시 ──────────────────────────────────── */
.mme-flag{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  border:1px solid;border-radius:12px;font-size:12px;font-weight:600;
}
.mme-flag svg{flex-shrink:0}
.mme-flag.is-on{color:#8A5A12;background:var(--warn-bg,#FDF6E7);border-color:#EDD9AE}
.mme-flag.is-off{color:#0B7F58;background:var(--ok-bg,#E7F8F1);border-color:#BFE7D6}

/* ── 하단 고지 ───────────────────────────────────────── */
.mme-foot{
  margin-top:18px;padding-top:12px;border-top:1px solid var(--line-2,#E7ECF5);
  font-size:11.5px;line-height:1.7;color:var(--ink-4,#71809D);
}
.mme-foot b{display:block;margin-bottom:3px;font-size:11.5px;font-weight:700;color:var(--ink-3,#52617D)}
.mme-foot p{margin:0 0 8px}
.mme-foot p:last-child{margin-bottom:0}
.mme-foot-demo{padding-top:8px;border-top:1px solid var(--line-2,#E7ECF5)}

/* ── 원시 입력 ───────────────────────────────────────── */
.mme-raw{margin-top:14px;border:1px solid var(--line-2,#E7ECF5);border-radius:12px;background:var(--surface-2,#F3F6FB)}
.mme-raw>summary{
  display:flex;align-items:center;gap:7px;padding:10px 12px;list-style:none;
  font-size:12px;font-weight:600;cursor:pointer;
}
.mme-raw>summary::-webkit-details-marker{display:none}
.mme-raw>summary:focus-visible{outline:3px solid var(--mme-focus);outline-offset:-3px;border-radius:12px}
.mme-raw[open]>summary{border-bottom:1px solid var(--line-2,#E7ECF5)}
.mme-caret{flex-shrink:0;transition:transform .15s ease}
.mme-raw[open]>summary .mme-caret{transform:rotate(180deg)}
.mme-raw pre{
  margin:0;padding:12px;max-height:280px;overflow:auto;white-space:pre;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'D2Coding',monospace;
  font-size:11.5px;line-height:1.6;color:var(--ink-2,#2D3B58);
}

/* ── 대기 상태 ───────────────────────────────────────── */
.mme-empty{padding:34px 12px;text-align:center}
.mme-empty-ic{
  width:46px;height:46px;margin:0 auto 12px;display:grid;place-items:center;
  border-radius:15px;background:var(--surface-2,#F3F6FB);color:var(--ink-4,#71809D);
}
.mme-empty b{display:block;font-size:14px;font-weight:700}
.mme-empty p{margin:7px 0 0;font-size:12px;line-height:1.65;color:var(--ink-3,#52617D)}

@keyframes mme-rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@keyframes mme-slide{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .mme-panel,.mme-caret,.mme-open .stage{animation:none!important;transition:none!important}
}