/* V2 부품 CSS — 그래프 4종 · 카드 · 벽 · 3단 프레임
 *
 * 전제: 이 파일 앞에 ../../tokens.css 가 실려 있어야 함. 값은 전부 토큰 변수로만 씀.
 * 근거: persona/dashboard/PLAN-v2.md 3·4·5·7절 · TOKENS.md · DESIGN.md 4·5절
 * 라이브러리 0 · 외부 요청 0 · SVG 0 · 다크 모드 없음 · 애니메이션 전환 없음.
 *
 * 그래프 글자는 전부 13px(--t-label-size)로 고정함. 기획서 4절 "본문 글자와 같은 크기(13px)".
 * 값 라벨은 막대 끝 바깥 오른쪽 6px(--v-val-gap).
 * 막대 최대 길이는 트랙 폭에서 값 라벨 자리(--v-gut)를 뺀 만큼으로 계산함 —
 * 100%짜리 막대에서도 값 라벨이 트랙 밖으로 나가지 않게 하는 장치임.
 */

@font-face{font-family:"Pretendard";src:url("fonts/pretendard-400.woff2") format("woff2");
  font-weight:400;font-display:block;font-style:normal}
@font-face{font-family:"Pretendard";src:url("fonts/pretendard-600.woff2") format("woff2");
  font-weight:600;font-display:block;font-style:normal}

:root{
  --v-val-gap:6px;        /* 값 라벨과 막대 끝 사이 */
  --v-gut:52px;           /* 트랙 오른쪽에 비워 두는 값 라벨 자리(기본값, JS가 글자수로 덮어씀) */
  --v-row-h:28px;         /* 가로 막대 행 높이 — 기획서 4절 */
  --v-bar-h:16px;         /* 가로 막대 높이 — 기획서 4절 */
  --v-stack-row-h:32px;   /* 100% 누적 행 높이(조각 안 13px 라벨을 담기 위해 24px 막대) */
  --v-stack-bar-h:24px;
  --v-name-w:132px;       /* 행 이름 열 */
  --rail-w:300px;
  --pane-w:148px;
}

/* ══ 1. 장 머리 — 기획서 3절 "0N / 장 이름 → 결론 문장 → 표본 조건" ══ */
.ch-head{margin-bottom:var(--s-6);padding-bottom:var(--s-4);
  border-bottom:1px solid var(--line-strong)}
.ch-mark{font-size:var(--t-caption-size);line-height:var(--t-caption-line);
  font-weight:var(--t-label-weight);color:var(--text-default)}
.ch-mark .ch-no{color:var(--text-strong)}
.ch-head h2{margin:var(--s-2) 0 0;font-size:var(--t-chapter-size);
  line-height:var(--t-chapter-line);letter-spacing:var(--t-chapter-track);
  font-weight:var(--t-chapter-weight);color:var(--text-strong);
  word-break:keep-all;overflow-wrap:anywhere}
.ch-cond{margin-top:var(--s-2);font-size:var(--t-label-size);
  line-height:var(--t-label-line);color:var(--text-default);word-break:keep-all}

/* ══ 2. 데이터 성격 라벨 4종 — 기획서 7절 ══ */
.src{display:inline-flex;align-items:center;flex:0 0 auto;height:20px;padding:0 8px;
  border:1px solid var(--line-weak);border-left-width:2px;background:var(--surface-sunken);
  font-size:var(--t-caption-size);line-height:var(--t-caption-line);
  font-weight:var(--t-label-weight);color:var(--text-default);white-space:nowrap}
.src-meas{border-left-color:var(--cat-1)}    /* 실측 */
.src-gen{border-left-color:var(--cat-3)}     /* 생성 */
.src-assume{border-left-color:var(--line-strong)} /* 가정 */
.src-test{border-left-color:var(--cat-2)}    /* 시험 결과 */

/* ══ 3. 카드 틀 ══ */
.v-card{display:flex;flex-direction:column;padding:var(--s-6);background:var(--surface-card);
  border:1px solid var(--line-weak);border-radius:0}
.v-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-3)}
.v-card-head h3{margin:0;font-size:var(--t-subtitle-size);line-height:var(--t-subtitle-line);
  letter-spacing:var(--t-subtitle-track);font-weight:var(--t-subtitle-weight);
  color:var(--text-strong);word-break:keep-all}
.v-card-sub{margin-top:var(--s-1);font-size:var(--t-label-size);line-height:var(--t-label-line);
  color:var(--text-default);word-break:keep-all}
.v-card-body{margin-top:var(--s-4);min-height:0}
.v-card-foot{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line-weak);
  font-size:var(--t-caption-size);line-height:var(--t-caption-line);color:var(--text-default)}
/* 그래프 카드 높이 사다리 — 기획서 4절 */
.h320{height:320px}
.h480{height:480px}
.h320 .v-card-body,.h480 .v-card-body{flex:1 1 auto;overflow:hidden}
/* 같은 행의 카드는 같은 높이 */
.v-row{display:grid;gap:var(--grid-gap);align-items:stretch}
.v-row>*{min-width:0}
.v-row-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.v-row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.v-row-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.v-stack{display:grid;gap:var(--grid-gap)}

/* ══ 4. 수치 카드 — 기획서 4절 "4열·높이 128" ══ */
.v-metric{height:128px;display:flex;flex-direction:column;justify-content:space-between;
  padding:var(--s-6);background:var(--surface-card);border:1px solid var(--line-weak);
  border-radius:0}
.v-metric .m-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.v-metric .m-label{font-size:var(--t-caption-size);line-height:var(--t-caption-line);
  font-weight:var(--t-label-weight);color:var(--text-default);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-metric .m-val{font-size:var(--t-title-size);line-height:var(--t-title-line);
  letter-spacing:var(--t-title-track);font-weight:var(--t-title-weight);
  color:var(--text-strong);font-variant-numeric:tabular-nums}
.v-metric .m-val .unit{font-size:var(--t-body-size);line-height:1;
  font-weight:var(--t-label-weight);letter-spacing:0;color:var(--text-default);margin-left:2px}
.v-metric .m-foot{font-size:var(--t-caption-size);line-height:var(--t-caption-line);
  color:var(--text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ══ 5. 가로 막대 — 기획서 4절 ══ */
.hb{display:block}
.hb-row{display:grid;grid-template-columns:var(--v-name-w) minmax(0,1fr);
  column-gap:var(--s-3);align-items:center;height:var(--v-row-h)}
.hb-name{font-size:var(--t-label-size);line-height:var(--t-label-line);
  color:var(--text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-track{position:relative;display:flex;align-items:center;height:var(--v-bar-h)}
.hb-fill{height:var(--v-bar-h);min-width:2px;background:var(--cat-1);
  width:calc(var(--p) * (100% - var(--v-gut)))}
.hb-val{margin-left:var(--v-val-gap);font-size:var(--t-label-size);
  line-height:var(--t-label-line);font-variant-numeric:tabular-nums;
  color:var(--text-default);white-space:nowrap}
.hb-rest{margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line-weak)}

/* ══ 6. 100% 누적 막대 — 기획서 4절 ══ */
.st-row{display:grid;grid-template-columns:var(--v-name-w) minmax(0,1fr);
  column-gap:var(--s-3);align-items:center;height:var(--v-stack-row-h)}
.st-name{font-size:var(--t-label-size);line-height:var(--t-label-line);
  color:var(--text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-bar{display:flex;height:var(--v-stack-bar-h);background:var(--surface-sunken);
  overflow:hidden}
.st-seg{display:flex;align-items:center;justify-content:center;height:var(--v-stack-bar-h);
  width:var(--w);box-shadow:1px 0 0 0 var(--surface-card) inset;overflow:hidden}
.st-seg:first-child{box-shadow:none}
.st-seg .st-in{font-size:var(--t-label-size);line-height:var(--v-stack-bar-h);
  font-weight:var(--t-label-weight);color:var(--text-on-dark);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.st-seg.on-light .st-in{color:var(--text-strong)}
.st-key{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);margin-top:var(--s-3)}
.st-key span{display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--t-label-size);line-height:var(--t-label-line);color:var(--text-default)}
.st-key i{width:10px;height:10px;flex:0 0 10px}
.st-tbl{margin-top:var(--s-3)}

/* ══ 7. 두 안 비교 — 기획서 4절 ══ */
.pc-row{display:grid;
  grid-template-columns:44px minmax(0,1fr) 76px minmax(0,1fr) 44px 60px;
  column-gap:var(--s-2);align-items:center;height:var(--v-row-h)}
.pc-side{font-size:var(--t-label-size);line-height:var(--t-label-line);
  color:var(--text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-side.r{text-align:left}
.pc-side.l{text-align:right}
.pc-half{display:flex;align-items:center;height:var(--v-bar-h)}
.pc-half.l{justify-content:flex-end}
.pc-bar{height:var(--v-bar-h);min-width:2px;width:calc(var(--p) * 100%)}
.pc-mid{text-align:center;font-size:var(--t-label-size);line-height:var(--t-label-line);
  font-variant-numeric:tabular-nums;color:var(--text-strong);white-space:nowrap;
  border-left:1px solid var(--line-strong);border-right:1px solid var(--line-strong)}
.pc-head{display:grid;grid-template-columns:44px minmax(0,1fr) 76px minmax(0,1fr) 44px 60px;
  column-gap:var(--s-2);height:20px;margin-bottom:var(--s-2)}
.pc-head span{font-size:var(--t-caption-size);line-height:var(--t-caption-line);
  color:var(--text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-head span.a{grid-column:1 / 3}
.pc-head span.c{grid-column:3 / 4;text-align:center}
.pc-head span.b{grid-column:4 / 6;text-align:right}
.pc-head span.r{grid-column:6 / 7;text-align:right}

/* ══ 8. 점과 구간 — 기획서 4절 ══ */
.dr-scale{display:grid;grid-template-columns:var(--v-name-w) minmax(0,1fr) 56px;
  column-gap:var(--s-3);height:20px;margin-bottom:var(--s-1)}
.dr-ticks{position:relative;height:20px}
.dr-ticks b{position:absolute;top:0;font-size:var(--t-caption-size);
  line-height:var(--t-caption-line);font-weight:400;color:var(--text-default);
  font-variant-numeric:tabular-nums;transform:translateX(-50%);
  left:calc(var(--x) * (100% - var(--v-gut)))}
.dr-ticks b.first{transform:none}
.dr-row{display:grid;grid-template-columns:var(--v-name-w) minmax(0,1fr) 56px;
  column-gap:var(--s-3);align-items:center;height:var(--v-row-h)}
.dr-flag{display:flex;justify-content:flex-end}
.dr-name{font-size:var(--t-label-size);line-height:var(--t-label-line);
  color:var(--text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-track{position:relative;height:var(--v-row-h)}
.dr-grid{position:absolute;top:0;bottom:0;width:1px;background:var(--line-grid);
  left:calc(var(--x) * (100% - var(--v-gut)))}
.dr-line{position:absolute;top:13px;height:2px;background:var(--line-strong);
  left:calc(var(--lo) * (100% - var(--v-gut)));
  width:calc((var(--hi) - var(--lo)) * (100% - var(--v-gut)))}
.dr-cap{position:absolute;top:8px;width:1px;height:12px;background:var(--line-strong);
  left:calc(var(--x) * (100% - var(--v-gut)))}
.dr-dot{position:absolute;top:9px;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:var(--cat-1);left:calc(var(--v) * (100% - var(--v-gut)))}
.dr-val{position:absolute;top:4px;font-size:var(--t-label-size);
  line-height:var(--t-label-line);font-variant-numeric:tabular-nums;color:var(--text-default);
  white-space:nowrap;left:calc(var(--hi) * (100% - var(--v-gut)) + var(--v-val-gap))}
.dr-foot{margin-top:var(--s-3);font-size:var(--t-caption-size);
  line-height:var(--t-caption-line);color:var(--text-default)}

/* ══ 9. 판정 배지 ══ */
.vb{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:0;
  font-size:var(--t-caption-size);line-height:var(--t-caption-line);
  font-weight:var(--t-label-weight);white-space:nowrap;border:1px solid var(--line-weak);
  background:var(--surface-sunken);color:var(--text-default)}
.vb-clear{border-color:var(--line-strong);color:var(--text-strong);background:var(--surface-card)}
.vb-none{border-style:dashed;background:var(--surface-card)}
.vb-fail{border-color:var(--alert);color:var(--alert);background:var(--surface-card)}
.vb-over{border-color:var(--line-strong);background:var(--surface-card)}

/* ══ 10. 개인 응답 카드 6줄 — 기획서 5.1 ══ */
.pcard{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4);
  background:var(--surface-card);border:1px solid var(--line-weak)}
.pc-id{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2);font-size:var(--t-label-size);
  line-height:var(--t-label-line);color:var(--text-default)}
.pc-id b{font-weight:var(--t-label-weight);color:var(--text-strong)}
.pc-prof p{margin:0;font-size:var(--t-label-size);line-height:var(--t-body-line);
  color:var(--text-default);word-break:keep-all}
.pc-rank{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.pc-rank div{height:28px;display:flex;align-items:center;justify-content:center;gap:var(--s-1);
  font-size:var(--t-label-size);line-height:var(--t-label-line);
  font-weight:var(--t-label-weight);color:var(--text-on-dark)}
.pc-rank div.on-light{color:var(--text-strong)}
.pc-rank div span{font-size:var(--t-caption-size);opacity:.85}
.pc-why{font-size:var(--t-label-size);line-height:var(--t-body-line);color:var(--text-strong);
  word-break:keep-all}
.pc-drop{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2);
  font-size:var(--t-label-size);line-height:var(--t-body-line);color:var(--text-default)}
.pc-judge{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  padding-top:var(--s-3);border-top:1px solid var(--line-weak);
  font-size:var(--t-caption-size);line-height:var(--t-caption-line);color:var(--text-default)}
.pc-score{display:inline-flex;gap:2px}
.pc-score i{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;
  font-style:normal;font-size:var(--t-caption-size);line-height:16px;
  background:var(--surface-sunken);color:var(--text-default);border:1px solid var(--line-weak)}
.pc-score i.on{background:var(--cat-1);color:var(--text-on-dark);border-color:var(--cat-1)}
.pc-move{font-size:var(--t-caption-size);line-height:var(--t-caption-line);color:var(--text-default)}
.pcard details{margin-top:var(--s-1)}
.pcard summary{font-size:var(--t-caption-size);line-height:var(--t-caption-line);
  color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.pcard details .raw{margin-top:var(--s-3);padding:var(--s-3);background:var(--surface-canvas);
  border:1px solid var(--line-weak);font-size:var(--t-caption-size);
  line-height:var(--t-body-line);color:var(--text-default);word-break:break-word}
.pcard details .raw dt{font-weight:var(--t-label-weight);color:var(--text-strong);
  margin-top:var(--s-3)}
.pcard details .raw dt:first-child{margin-top:0}
.pcard details .raw dd{margin:var(--s-1) 0 0}

/* ══ 11. 이유 원문 벽 — 기획서 5.2 ══ */
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--grid-gap);
  align-items:start}
.wall-col{min-width:0}
.wall-h{display:flex;align-items:center;gap:var(--s-2);padding-bottom:var(--s-2);
  border-bottom:2px solid var(--line-weak);font-size:var(--t-label-size);
  line-height:var(--t-label-line);font-weight:var(--t-label-weight);color:var(--text-strong)}
.wall-h i{width:10px;height:10px;flex:0 0 10px}
.wall-h em{margin-left:auto;font-style:normal;font-weight:400;color:var(--text-default);
  font-size:var(--t-caption-size);font-variant-numeric:tabular-nums}
.q{padding:var(--s-3) 0;border-bottom:1px solid var(--line-weak)}
.q p{margin:0;font-size:var(--t-label-size);line-height:var(--t-body-line);
  color:var(--text-default);word-break:keep-all}
.q .who{margin-top:var(--s-1);font-size:var(--t-caption-size);
  line-height:var(--t-caption-line);color:var(--text-default)}
.q:last-child{border-bottom:0}

/* ══ 12. 예상 댓글 벽 — 기획서 5.3 ══ */
.cw-top{margin-bottom:var(--s-4);padding-bottom:var(--s-4);
  border-bottom:1px solid var(--line-weak)}
.cm{padding:var(--s-3) 0;border-bottom:1px solid var(--line-weak)}
.cm:last-child{border-bottom:0}
.cm-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-bottom:var(--s-1)}
.cm-t{margin:0;font-size:var(--t-label-size);line-height:var(--t-body-line);
  color:var(--text-default);word-break:keep-all}
.cm-who{font-size:var(--t-caption-size);line-height:var(--t-caption-line);
  color:var(--text-default)}

/* ══ 13. 검사 표 ══ */
.tblwrap{width:100%}
.tbl td.wrap{white-space:normal;word-break:keep-all}
.tbl td.q{padding:10px var(--s-3);border-bottom:0}

/* ══ 14. 3단 프레임 — 기획서 5.5 ══ */
.frame{display:grid;grid-template-columns:var(--pane-w) minmax(0,1fr) var(--rail-w);
  gap:var(--grid-gap);align-items:start}
.pane{position:sticky;top:var(--s-6);display:flex;flex-direction:column;gap:var(--s-2)}
.pane-h{font-size:var(--t-caption-size);line-height:var(--t-caption-line);
  font-weight:var(--t-label-weight);color:var(--text-default)}
.pane button{display:flex;align-items:center;gap:var(--s-2);width:100%;height:var(--ctl-h-md);
  padding:0 10px;border:1px solid var(--line-weak);border-radius:var(--radius-md);
  background:var(--surface-card);font:inherit;font-size:var(--t-label-size);
  line-height:var(--t-body-tight-line);color:var(--text-default);cursor:pointer;text-align:left}
.pane button:hover{background:var(--surface-sunken)}
.pane button[aria-pressed="true"]{border-color:var(--text-strong);background:var(--surface-sunken);
  color:var(--text-strong);font-weight:var(--t-label-weight)}
.pane button i{width:10px;height:10px;flex:0 0 10px}
.pane button em{margin-left:auto;font-style:normal;font-size:var(--t-caption-size);
  font-variant-numeric:tabular-nums;color:var(--text-default)}
.center{min-width:0;display:grid;gap:var(--grid-gap)}
.rail{position:sticky;top:var(--s-6);min-width:0;padding:var(--s-4);
  background:var(--surface-card);border:1px solid var(--line-weak);
  max-height:calc(100vh - var(--s-12));overflow-y:auto}
.rail h3{margin:0;font-size:var(--t-subtitle-size);line-height:var(--t-subtitle-line);
  letter-spacing:var(--t-subtitle-track);font-weight:var(--t-subtitle-weight);
  color:var(--text-strong)}
.rail .rail-sub{margin-top:var(--s-1);font-size:var(--t-caption-size);
  line-height:var(--t-caption-line);color:var(--text-default)}
.rail .rail-sec{margin-top:var(--s-4);padding-top:var(--s-3);
  border-top:1px solid var(--line-weak)}
.rail .rail-sec>span{display:block;margin-bottom:var(--s-2);font-size:var(--t-caption-size);
  line-height:var(--t-caption-line);font-weight:var(--t-label-weight);color:var(--text-default)}

/* ══ 15. 화면 뼈대(내비 + 본문) — 기존 사이트 구조 재사용 ══ */
.shell{display:flex;align-items:flex-start;min-height:100vh;
  background:linear-gradient(to right,var(--surface-card) 0,var(--surface-card) var(--nav-w),
    var(--line-strong) var(--nav-w),var(--line-strong) calc(var(--nav-w) + 1px),
    var(--surface-canvas) calc(var(--nav-w) + 1px))}
.main{flex:1 1 auto;min-width:0;padding:var(--s-6) var(--page-pad) var(--s-12)}
.wrap{max-width:var(--grid-width);margin:0 auto}
.nav-list button.nav-item{width:100%;border:0;background:none;text-align:left;
  font-family:inherit;cursor:pointer}
.nav-list li{margin:0}
.sec-h{display:flex;align-items:baseline;gap:var(--s-3);margin-top:var(--s-8)}
.sec-h h3{margin:0;font-size:var(--t-title-size);line-height:var(--t-title-line);
  letter-spacing:var(--t-title-track);font-weight:var(--t-title-weight);color:var(--text-strong)}
.sec-h p{font-size:var(--t-label-size);line-height:var(--t-label-line);color:var(--text-default)}
.note{font-size:var(--t-caption-size);line-height:var(--t-caption-line);color:var(--text-default)}

/* ══ 16. 색 배정 — DESIGN.md 4.2 고정 ══ */
.f-A{background:var(--cat-1)} .f-B{background:var(--cat-2)}
.f-C{background:var(--cat-3)} .f-D{background:var(--cat-6)}
.f-core{background:var(--cat-1)} .f-sub{background:var(--cat-2)}
.f-ctrl{background:var(--cat-6)} .f-mind{background:var(--cat-4)}
.f-neutral{background:var(--seq-3)}

/* ══ 16-2. 근거 색인 링크 — 집계 숫자 → 그 숫자를 만든 인물 목록 ══ */
.ev{position:relative;display:inline-flex;vertical-align:baseline}
.ev-n{padding:0 4px;border:0;border-bottom:1px dashed var(--accent);background:none;
  font:inherit;font-variant-numeric:tabular-nums;color:var(--accent);cursor:pointer}
.ev-n:hover{background:var(--surface-sunken)}
.ev-n[aria-expanded="true"]{background:var(--surface-sunken);border-bottom-style:solid}
.ev-pop{position:absolute;top:calc(100% + 4px);left:0;z-index:40;width:212px;
  max-height:264px;overflow-y:auto;padding:var(--s-3);background:var(--surface-card);
  border:1px solid var(--line-strong);box-shadow:0 2px 8px rgba(0,0,0,.12);text-align:left}
.ev-pop-right{left:auto;right:0}
.ev-h{margin-bottom:var(--s-2);padding-bottom:var(--s-2);border-bottom:1px solid var(--line-weak);
  font-size:var(--t-caption-size);line-height:var(--t-caption-line);
  font-weight:var(--t-label-weight);color:var(--text-strong);white-space:nowrap}
.ev-list{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-1)}
.ev-list li{display:flex;align-items:baseline;gap:var(--s-2);
  font-size:var(--t-label-size);line-height:var(--t-label-line);white-space:nowrap}
.ev-list a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.ev-list em{margin-left:auto;font-style:normal;font-size:var(--t-caption-size);
  color:var(--text-default)}
.ev-none{color:var(--text-default)}

/* ══ 17. 접힘 — 1200 미만 ══ */
@media (max-width:1199px){
  .frame{grid-template-columns:minmax(0,1fr)}
  .pane,.rail{position:static;max-height:none}
  .pane{flex-direction:row;flex-wrap:wrap}
  .pane button{width:auto}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v-row-4,.v-row-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}