.lh-root{
  width:100%;
  min-height:0;
  display:grid;
  align-content:start;
  gap:clamp(16px,1.8vw,24px);
}
.lh-head{
  min-width:0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-4);
}
.lh-head__copy{min-width:0;}
.lh-head__tools{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--sp-2);
  min-width:0;
}
.lh-head__primary{
  min-height:44px;
  flex:none;
}
.lh-head__status{
  flex:none;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  background:var(--bg-surface);
  color:var(--text-body);
  font-family:var(--font-num);
  font-size:var(--fs-xs);
  font-weight:750;
}
.lh-title{
  margin:5px 0 0;
  color:var(--text-strong);
  font-size:clamp(24px,2.4vw,32px);
  font-weight:760;
  letter-spacing:0;
  line-height:1.16;
}
.lh-sub{
  margin:7px 0 0;
  max-width:820px;
  color:var(--text-body);
  font-size:var(--fs-sm);
  line-height:1.55;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
.lh-dashboard-hero{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,360px);
  gap:var(--sp-4);
  align-items:start;
}
.lh-dashboard-grid{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,360px);
  gap:var(--sp-4);
  align-items:start;
}
.lh-dashboard-status{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
/* 중간 폭 이하 전용 가로 탭 — 데스크톱에서는 숨김(리뷰 화면 sr-tabs와 동일 패턴) */
.lh-tabs{
  display:none;
  gap:4px;
  padding:4px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);
  background:var(--bg-surface-2);
  box-shadow:var(--shadow-sm);
}
.lh-tabs button{
  position:relative;
  flex:1 1 0;
  min-width:0;
  padding:8px 12px;
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  background-color:transparent;
  color:var(--text-body);
  font-size:var(--fs-sm);
  font-weight:650;
  cursor:pointer;
  min-height:44px;
  transition:
    background-color var(--dur-fast) var(--ease-spring),
    border-color var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-fast) var(--ease-spring),
    color var(--dur-fast) var(--ease-spring),
    transform var(--dur-fast) var(--ease-spring);
}
.lh-tabs button:active{
  transform:scale(0.96);
}
.lh-tabs button:hover{
  color:var(--text-strong);
  background-color:color-mix(in srgb,var(--text-strong) 5%,transparent);
}
.lh-tabs button:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:1px;
}
.lh-tabs button.is-active{
  background-color:var(--bg-surface);
  border-color:var(--border-strong);
  color:var(--text-strong);
  box-shadow:var(--shadow-sm);
  font-weight:750;
}
.lh-dashboard-side{
  min-width:0;
  display:grid;
  align-content:start;
  gap:var(--sp-4);
}
.lh-dashboard-side__tabpanel{
  min-width:0;
  display:grid;
  align-content:start;
  gap:var(--sp-4);
  grid-column:1 / -1;
}
.lh-dashboard-feedback .lh-feedback-mini{
  padding-top:0;
  border-top:0;
}
.lh-work-cluster{
  min-width:0;
  display:grid;
  gap:var(--sp-4);
  padding:clamp(14px,1.6vw,20px);
  border:1px solid color-mix(in srgb,var(--accent) 15%,var(--border-subtle));
  border-radius:var(--radius);
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 44%),
    color-mix(in srgb,var(--bg-surface) 88%,var(--bg-surface-2));
  box-shadow:var(--shadow-sm);
}
.lh-work-cluster__head{
  min-width:0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-3);
  padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--border-subtle);
}
.lh-work-cluster__head h2{
  margin:7px 0 0;
  color:var(--text-strong);
  font-size:clamp(19px,1.6vw,24px);
  line-height:1.18;
  letter-spacing:0;
}
.lh-work-cluster__primary,
.lh-work-cluster__secondary{
  min-width:0;
  display:grid;
  gap:var(--sp-4);
  align-items:stretch;
}
.lh-work-cluster__primary{
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
}
.lh-work-cluster__secondary{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.lh-session-focus,
.lh-coach-card,
.lh-panel,
.lh-list-pane,
.lh-preview__main,
.lh-activity,
.lh-persona-progress,
.lh-history-main,
.lh-history-task,
.lh-archive-note{
  min-width:0;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  background:var(--bg-surface);
  box-shadow:var(--shadow-sm);
}
.lh-session-focus{
  min-width:0;
  display:grid;
  align-content:start;
  gap:var(--sp-5);
  padding:clamp(18px,2.3vw,28px);
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--bg-surface-2) 86%,transparent),var(--bg-surface));
}
.lh-session-focus__head{
  min-width:0;
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:var(--sp-4);
}
/* 페르소나 제목이 페이지 h1(.lh-title)보다 커서 위계가 역전돼 있었다(2026-07-27).
   크기는 h1 아래로 낮추고 강조는 weight 로만 준다. */
.lh-session-focus__head h2{
  margin:8px 0 0;
  color:var(--text-strong);
  font-size:clamp(19px,1.7vw,24px);
  font-weight:820;
  line-height:1.18;
  letter-spacing:0;
  word-break:keep-all;
}
/* D3: 제목에서 떼어낸 주호소 조각. 크기를 낮춰 제목 한 줄에 가운뎃점이 1개만 남게 한다. */
.lh-title-tail{
  display:block;
  margin-top:4px;
  color:var(--text-body);
  font-size:.64em;
  font-weight:740;
  line-height:1.34;
  letter-spacing:0;
  word-break:keep-all;
}
.lh-session-focus__head p{
  margin:7px 0 0;
  color:var(--text-muted);
  font-size:14px;
  line-height:1.5;
}
.lh-session-focus__status{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 11px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent-deep);
  font-size:12px;
  font-weight:820;
  white-space:nowrap;
}
.lh-coach-card{
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  padding:var(--sp-5);
}
.lh-coach-card__cta{
  margin-top:auto;
}
.lh-coach-card h2,
.lh-panel__head h2{
  margin:8px 0 0;
  color:var(--text-strong);
  font-size:clamp(19px,1.8vw,25px);
  line-height:1.22;
  letter-spacing:0;
}
.lh-coach-card p{
  margin:12px 0 0;
  color:var(--text-body);
  font-size:14px;
  line-height:1.58;
  word-break:keep-all;
}
.lh-coach-hints{
  display:grid;
  gap:8px;
}
.lh-coach-hints span{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 11px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface-2);
  color:var(--text-body);
  font-size:12.5px;
  font-weight:700;
  line-height:1.35;
}
.lh-coach-hints svg{
  flex:0 0 auto;
  color:var(--accent-deep);
}
.lh-recap{
  min-width:0;
  display:grid;
  grid-template-columns:156px minmax(0,1fr);
  gap:var(--sp-5);
  align-items:start;
  padding-top:var(--sp-4);
  border-top:1px solid var(--border-subtle);
}
.lh-recap__avatar{
  min-width:0;
  display:grid;
  /* L3: 암시적 auto 트랙이면 자식(고정 196px)의 max-content 로 트랙이 부풀어
     컨테이너(폭 320px 에서 148px) 밖으로 나간다. 트랙을 명시해 컨테이너에 묶는다. */
  grid-template-columns:minmax(0,1fr);
  place-items:center;
  min-height:156px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  background:var(--bg-surface);
  overflow:hidden;
}
/* L3(2026-07-27): ClientAvatar 는 size prop 을 인라인 style(width/height:196px)로 박는다.
   실측 /learn — 폭 320px 에서 컨테이너 148px, 폭 360px 에서 188px 이라
   자식 figure(196px)가 오른쪽으로 각각 48px / 8px 잘려 나갔다
   (.lh-recap__avatar 의 overflow:hidden 에 걸림).
   → 자식 폭을 컨테이너에 맞춰 줄인다. */
.lh-recap__avatar .vg-avatar{
  margin:0;
  /* min-width:auto(기본) 이면 인라인 width 196px 가 그리드 트랙의 자동 최소값이 돼
     트랙 자체가 196px 로 부풀고 컨테이너(148px) 밖으로 삐져나온다. 0 으로 풀어야
     아래 max-width 가 실제로 걸린다. */
  min-width:0;
  max-width:100%;
}
/* 폭만 줄이면 인라인 height(고정 196px) 때문에 원형 마스크가 타원이 되므로
   높이를 폭에서 다시 계산한다. 인라인 스타일이라 !important 없이는 못 이긴다. */
.lh-recap__avatar .vg-avatar__stage{
  height:auto !important;
  aspect-ratio:1;
}
.lh-recap__body{
  min-width:0;
  display:grid;
  gap:12px;
}
.lh-recap__meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.lh-recap__meta-row span{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 8px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface);
  color:var(--text-muted);
  font-family:var(--font-num);
  font-size:11.5px;
  font-weight:780;
}
.lh-recap__coach{
  margin:0;
  color:var(--text-muted);
  font-size:12.5px;
  line-height:1.45;
  word-break:keep-all;
}
.lh-recap__facts{
  margin:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.lh-recap__facts div{
  min-width:0;
  display:grid;
  gap:3px;
  padding:8px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface);
}
.lh-recap__facts dt{
  color:var(--text-muted);
  font-size:11px;
  font-weight:730;
}
.lh-recap__facts dd{
  margin:0;
  color:var(--text-strong);
  font-family:var(--font-num);
  font-size:12px;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lh-recap__progress{
  display:grid;
  gap:8px;
}
.lh-recap__progress div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.lh-recap__progress span{
  color:var(--text-muted);
  font-size:11px;
  font-weight:760;
}
.lh-recap__progress b{
  color:var(--accent-deep);
  font-family:var(--font-num);
  font-size:12px;
  font-weight:840;
}
.lh-recap__progress i{
  position:relative;
  display:block;
  height:8px;
  border-radius:999px;
  background:var(--bg-surface);
  overflow:hidden;
}
.lh-recap__progress i::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--lh-stage-progress,0%);
  border-radius:inherit;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 72%,var(--warn-solid)));
}
.lh-recap__quote{
  min-width:0;
  display:grid;
  gap:5px;
  padding:10px 12px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface);
}
.lh-recap__quote span{
  color:var(--text-muted);
  font-size:11px;
  font-weight:760;
}
.lh-recap__quote p{
  margin:0;
  max-width:none;
  color:var(--text-strong);
  font-size:13px;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.lh-recap__learner{
  margin:0;
  display:grid;
  gap:5px;
  padding-top:2px;
}
.lh-recap__learner span{
  color:var(--text-muted);
  font-size:11px;
  font-weight:760;
}
.lh-recap__learner p{
  margin:0;
  color:var(--text-body);
  font-size:12.5px;
  line-height:1.45;
  word-break:keep-all;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.lh-recap__coach{
  color:var(--text-body);
}
.lh-metric-grid{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.lh-metric-card{
  min-width:0;
  min-height:86px;
  display:grid;
  align-content:start;
  gap:6px;
  padding:12px 14px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--bg-surface) 82%,var(--bg-surface-2));
  color:var(--text-body);
  text-align:left;
  box-shadow:none;
  cursor:pointer;
}
.lh-metric-card:hover{
  border-color:var(--border-strong);
  background:var(--bg-surface-2);
}
.lh-metric-card:focus-visible,
.lh-history-task:focus-visible,
.lh-panel__head button:focus-visible,
.lh-recommend-card button:focus-visible,
.lh-compact-list__action:focus-visible,
.lh-feedback-mini__row:focus-visible,
.lh-pane-head button:focus-visible,
.lh-persona:focus-visible,
.lh-review-link:focus-visible,
.lh-persona-progress__row:focus-visible{
  outline:2px solid var(--border-focus);
  outline-offset:2px;
  box-shadow:0 0 0 3px var(--focus-ring);
}
.lh-metric-card span,
.lh-insight-list span{
  color:var(--text-muted);
  font-size:12px;
  font-weight:760;
}
.lh-metric-card b{
  color:var(--text-strong);
  font-family:var(--font-num);
  font-size:clamp(18px,1.6vw,24px);
  line-height:1.06;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lh-metric-card p,
.lh-insight-list p{
  margin:0;
  color:var(--text-body);
  font-size:12.5px;
  line-height:1.45;
  word-break:keep-all;
}
.lh-dashboard-columns,
.lh-history-layout{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-4);
  align-items:start;
}
.lh-history-layout{
  grid-template-columns:minmax(0,1fr) minmax(300px,380px);
}
.lh-history-overview{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.lh-history-task{
  min-height:96px;
  display:grid;
  align-content:start;
  gap:6px;
  padding:14px;
  color:var(--text-body);
  text-align:left;
  cursor:pointer;
}
.lh-history-task:hover,
.lh-history-task.is-selected{
  border-color:color-mix(in srgb,var(--accent) 50%,var(--border-subtle));
  background:var(--accent-tint);
}
.lh-history-task span{
  color:var(--text-muted);
  font-size:12px;
  font-weight:800;
}
.lh-history-task b{
  color:var(--text-strong);
  font-family:var(--font-num);
  font-size:clamp(23px,2vw,30px);
  line-height:1;
}
.lh-history-task small{
  color:var(--text-body);
  font-size:12px;
  line-height:1.35;
}
.lh-history-main{
  display:grid;
  gap:var(--sp-4);
  padding:var(--sp-5);
}
.lh-history-side{
  min-width:0;
  display:grid;
  gap:var(--sp-4);
}
.lh-history-main__head{
  min-width:0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-3);
}
.lh-history-main__head h2{
  margin:7px 0 0;
  color:var(--text-strong);
  font-size:clamp(19px,1.8vw,25px);
  line-height:1.18;
}
.lh-history-main__head > span{
  flex:none;
  color:var(--text-muted);
  font-family:var(--font-num);
  font-size:12px;
  font-weight:800;
}
.lh-history-tools{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto;
  gap:10px;
  align-items:end;
}
.lh-history-search{
  min-width:0;
  display:grid;
  gap:6px;
}
.lh-history-search span{
  color:var(--text-muted);
  font-size:12px;
  font-weight:780;
}
.lh-history-search input{
  width:100%;
  min-width:0;
  min-height:38px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface-2);
  color:var(--text-strong);
  font:inherit;
  font-size:13px;
  padding:0 11px;
}
.lh-history-search input::placeholder{color:var(--text-muted);}
.lh-history-search input:focus{
  outline:2px solid color-mix(in srgb,var(--accent) 34%,transparent);
  outline-offset:2px;
  border-color:var(--accent);
}
.lh-history-filter{
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end;
}
.lh-history-filter button{
  min-height:38px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface-2);
  color:var(--text-body);
  font-size:12px;
  font-weight:800;
  padding:0 11px;
  white-space:nowrap;
  cursor:pointer;
}
.lh-history-filter button:hover,
.lh-history-filter button.is-selected{
  border-color:color-mix(in srgb,var(--accent) 42%,var(--border-subtle));
  background:var(--accent-tint);
  color:var(--accent-deep);
}
.lh-panel{
  display:grid;
  gap:14px;
  padding:18px;
}
.lh-panel__head,
.lh-pane-head,
.lh-activity__head,
.lh-persona-progress__head{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
}
.lh-panel__head h2{
  font-size:clamp(17px,1.5vw,21px);
}
.lh-panel__badge{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 9px;
  border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);
  border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  color:var(--accent-deep);
  font-size:11.5px;
  font-weight:800;
  white-space:nowrap;
}
.lh-panel__head button{
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface-2);
  color:var(--accent-deep);
  min-height:32px;
  padding:0 10px;
  font-size:12px;
  font-weight:740;
  cursor:pointer;
  white-space:nowrap;
}
.lh-insight-list{
  display:grid;
  gap:10px;
}
.lh-insight-list div{
  min-width:0;
  display:grid;
  gap:6px;
  padding:14px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  background:var(--bg-surface-2);
}
.lh-insight-list b{
  color:var(--text-strong);
  font-size:15px;
  line-height:1.35;
}
.lh-recommend-card{
  display:grid;
  gap:10px;
  min-width:0;
  padding:16px;
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border-subtle));
  border-radius:var(--radius);
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent 62%),
    var(--bg-surface-2);
}
.lh-recommend-card span{
  color:var(--accent-deep);
  font-size:12px;
  font-weight:800;
}
.lh-recommend-card b{
  color:var(--text-strong);
  font-size:17px;
  line-height:1.35;
  word-break:keep-all;
}
.lh-recommend-card p{
  margin:0;
  color:var(--text-body);
  font-size:12.5px;
  line-height:1.55;
  word-break:keep-all;
}
.lh-recommend-card button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:44px;
  margin-top:2px;
  padding:0 12px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  color:var(--accent-deep);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.lh-recommend-card button:hover{
  background:color-mix(in srgb,var(--accent) 17%,transparent);
}
.lh-compact-empty{
  margin:0;
  padding:13px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  background:var(--bg-surface-2);
  color:var(--text-body);
  font-size:13px;
  line-height:1.5;
}
.lh-compact-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}
.lh-compact-list li{
  min-width:0;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface-2);
}
.lh-compact-list__avatar{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:color-mix(in srgb,var(--clay) 20%,var(--bg-surface));
  color:var(--text-strong);
  font-weight:820;
}
.lh-compact-list__body{
  min-width:0;
  display:grid;
  gap:3px;
}
.lh-compact-list__body b{
  min-width:0;
  color:var(--text-strong);
  font-size:13px;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* D3: "코드 · 단계 · 날짜"에서 날짜를 오른쪽 컬럼으로 떼어 가운뎃점을 1개로 줄인다. */
.lh-compact-list__body small{
  min-width:0;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  color:var(--text-muted);
  font-family:var(--font-num);
  font-size:11.5px;
  line-height:1.25;
}
.lh-compact-list__body small > span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lh-compact-list__body small > span:last-child{
  flex:none;
}
.lh-compact-list__action,
.lh-compact-list__status{
  min-height:28px;
  padding:0 8px;
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  color:var(--accent-deep);
  font-size:11.5px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
}
.lh-compact-list__status{
  border-color:var(--border-subtle);
  background:var(--bg-surface);
  color:var(--text-body);
}
.lh-feedback-mini{
  display:grid;
  gap:10px;
  padding-top:14px;
  border-top:1px solid var(--border-subtle);
}
.lh-feedback-mini__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.lh-feedback-mini__head span{
  color:var(--text-muted);
  font-size:12px;
  font-weight:760;
}
.lh-feedback-mini > p{
  margin:0;
  color:var(--text-body);
  font-size:13px;
  line-height:1.5;
}
.lh-feedback-mini__row{
  display:grid;
  gap:5px;
  padding:10px 0;
  border:0;
  border-bottom:1px solid var(--border-subtle);
  background:transparent;
  color:var(--text-body);
  text-align:left;
  cursor:pointer;
}
.lh-feedback-mini__row:hover{
  color:var(--accent-deep);
}
/* D3: "코드 · 단계 · 점수"에서 점수를 오른쪽 컬럼으로 분리 */
.lh-feedback-mini__row b{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  color:var(--text-strong);
  font-size:13.5px;
  line-height:1.35;
}
.lh-feedback-mini__row b > span:first-child{
  min-width:0;
  color:var(--text-strong);
  font-size:inherit;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lh-feedback-mini__row b > span:last-child{
  flex:none;
  color:var(--text-body);
  font-size:inherit;
}
.lh-feedback-mini__row span{
  color:var(--text-body);
  font-size:12.5px;
  line-height:1.45;
  word-break:keep-all;
}
.lh-feedback-mini__row em{
  color:var(--text-muted);
  font-size:11.5px;
  font-style:normal;
}
.lh-voice-practice-intent{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.85fr);
  gap:var(--sp-4);
  align-items:center;
  padding:var(--sp-4);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  background:var(--accent-tint);
}
.lh-voice-practice-intent h2{
  margin:5px 0 0;
  color:var(--text-strong);
  font-size:var(--fs-h3);
  line-height:1.35;
}
.lh-voice-practice-intent p{
  margin:7px 0 0;
  color:var(--text-body);
  font-size:var(--fs-sm);
  line-height:1.6;
}
.lh-voice-practice-intent dl{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-2);
  margin:0;
}
.lh-voice-practice-intent dl > div{
  min-width:0;
  padding:var(--sp-3);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface);
}
.lh-voice-practice-intent dt{
  color:var(--text-muted);
  font-size:var(--fs-xs);
}
.lh-voice-practice-intent dd{
  margin:4px 0 0;
  overflow:hidden;
  color:var(--text-strong);
  font-family:var(--font-num);
  font-size:var(--fs-sm);
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lh-voice-practice-intent.is-error{
  border-color:color-mix(in srgb,var(--crit-text) 45%,var(--border-subtle));
  background:var(--crit-tint);
}
.lh-practice-launch-intent{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--border-subtle));
  background:color-mix(in srgb,var(--accent-tint) 86%,var(--bg-surface));
}
.lh-practice-launch-intent dl{
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
}
.lh-practice-launch-intent__details,
.lh-continuity__memory{
  min-width:0;
}
.lh-practice-launch-intent__details summary,
.lh-continuity__memory summary{
  min-width:0;
  min-height:44px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface);
  color:var(--text-body);
  cursor:pointer;
  list-style:none;
}
.lh-practice-launch-intent__details summary::-webkit-details-marker,
.lh-continuity__memory summary::-webkit-details-marker{
  display:none;
}
.lh-practice-launch-intent__details summary span,
.lh-continuity__memory summary span{
  color:var(--accent-deep);
  font-size:var(--fs-xs);
  font-weight:760;
}
.lh-practice-launch-intent__details summary b,
.lh-continuity__memory summary b{
  min-width:0;
  overflow:hidden;
  color:var(--text-strong);
  font-size:var(--fs-sm);
  font-weight:720;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lh-practice-launch-intent__details summary svg,
.lh-continuity__memory summary svg{
  transition:transform var(--dur-base) var(--ease-out);
}
.lh-practice-launch-intent__details[open] summary svg,
.lh-continuity__memory[open] summary svg{
  transform:rotate(90deg);
}
.lh-practice-launch-intent__details summary:focus-visible,
.lh-continuity__memory summary:focus-visible{
  outline:2px solid var(--border-focus);
  outline-offset:2px;
}
.lh-practice-launch-intent__details dl{
  margin-top:var(--sp-2);
}
.lh-continuity__memory-body{
  margin-top:var(--sp-2);
}
.lh-continuity__memory-body > p{
  margin:0;
  color:var(--text-body);
  font-size:var(--fs-sm);
  line-height:1.55;
  word-break:keep-all;
}
.lh-continuity__memory-body dl{
  display:grid;
  gap:var(--sp-2);
  margin:0;
}
.lh-continuity__memory-body dl > div{
  min-width:0;
  padding-top:var(--sp-2);
  border-top:1px solid var(--border-subtle);
}
.lh-continuity__memory-body dt{
  color:var(--text-muted);
  font-size:var(--fs-xs);
  font-weight:760;
}
.lh-continuity__memory-body dd{
  margin:5px 0 0;
  color:var(--text-body);
  font-size:var(--fs-sm);
  line-height:1.55;
  white-space:pre-wrap;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
.lh-continuity__memory-body ul{
  display:grid;
  gap:4px;
  margin:0;
  padding-left:18px;
}
.lh-practice-layout{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(300px,380px) minmax(0,1fr);
  gap:var(--sp-5);
  align-items:start;
}
.lh-list-pane{
  position:sticky;
  top:calc(var(--topbar-h) + 18px);
  display:grid;
  grid-template-rows:auto auto;
  align-content:start;
  height:max-content;
  max-height:none;
  padding:var(--sp-4);
  overflow:visible;
}
.lh-pane-head{margin-bottom:var(--sp-3);}
.lh-pane-head button{
  min-height:30px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface-2);
  color:var(--accent-deep);
  padding:0 9px;
  font-size:12px;
  font-weight:740;
  white-space:nowrap;
  cursor:pointer;
}
.lh-pane-head button:hover{
  border-color:var(--border-strong);
  background:var(--accent-tint);
}
.lh-pane-head span,
.lh-activity__head span,
.lh-persona-progress__head span{
  color:var(--text-muted);
  font-family:var(--font-num);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.lh-personas{
  min-height:0;
  display:grid;
  align-content:start;
  grid-auto-rows:auto;
  gap:10px;
  overflow:visible;
  scrollbar-gutter:auto;
  padding-right:0;
}
.lh-persona{
  position:relative;
  min-width:0;
  width:100%;
  min-height:0;
  height:auto;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:11px;
  align-items:start;
  padding:13px 38px 13px 12px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  background:var(--bg-surface-2);
  color:var(--text-body);
  text-align:left;
  cursor:pointer;
  overflow:visible;
}
.lh-persona:hover{border-color:var(--border-strong);}
.lh-persona:disabled{
  cursor:not-allowed;
  opacity:.68;
}
.lh-persona.is-selected{
  border-color:var(--accent);
  background:var(--accent-tint);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);
}
.lh-persona__mark{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  color:var(--text-strong);
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  font-family:var(--font-num);
  font-size:12px;
  font-weight:800;
}
.lh-persona__body{
  min-width:0;
  display:grid;
  align-content:start;
  gap:5px;
}
.lh-persona__name{
  color:var(--text-strong);
  font-size:14.5px;
  font-weight:760;
  line-height:1.32;
  word-break:keep-all;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
/* D3: 이름줄에서 떼어낸 주호소. 이름과 다른 층으로 읽히게 색·굵기를 낮춘다. */
.lh-persona__concern{
  min-width:0;
  color:var(--text-body);
  font-size:12.5px;
  font-weight:700;
  line-height:1.35;
  word-break:keep-all;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.lh-persona__meta{
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--text-muted);
  font-size:12px;
  line-height:1.45;
}
.lh-persona__meta > span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* D3: "· 사용 불가"를 이어 붙이면 가운뎃점이 늘어나므로 별도 칩으로 뺀다. */
.lh-persona__flag{
  flex:none;
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:0 6px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface);
  color:var(--warn-text);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.lh-persona__summary{
  min-width:0;
  color:var(--text-body);
  font-size:12.5px;
  line-height:1.45;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
.lh-persona__check{
  position:absolute;
  top:10px;
  right:10px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--accent);
  color:var(--text-on-accent);
}
.lh-persona.is-skel{pointer-events:none;}
.lh-skel__box,
.lh-skel__line{
  background:linear-gradient(90deg,var(--bg-surface-2),var(--neutral-100),var(--bg-surface-2));
  background-size:180% 100%;
  animation:lhSkel 1.1s ease-in-out infinite;
}
.lh-skel__line{
  height:11px;
  border-radius:6px;
}
.lh-skel__line--name{width:62%;height:13px;}
.lh-skel__line--meta{width:44%;height:10px;}
.lh-skel__line--sum{width:92%;}
.lh-preview{
  min-width:0;
  display:grid;
  gap:var(--sp-4);
  align-content:start;
}
.lh-preview__main{
  display:grid;
  gap:var(--sp-4);
  align-content:start;
  padding:var(--sp-5);
}
/* L1(2026-07-27): 이전 `grid-template-columns:minmax(0,1fr) minmax(220px,auto)` 는
   우측 액션 열이 max-content(=.lh-actions__note 의 max-width 280px)까지 먼저 자라고
   좌측 신원 열은 최소 0 이라 남은 폭을 전부 빼앗겼다.
   실측(폭 1181px): 프리뷰 히어로 423px → 열이 "127px 280px" 로 잡혀 제목 열이 47px,
   폭 1280px 에서도 146px 밖에 안 돼 26~28px 제목이 글자 단위로 쪼개져 흘러내렸다.
   → 액션을 "줄바꿈되는 항목"으로 바꾼다. 신원 열이 340px 를 못 받는 폭에서는
   액션이 통째로 아랫줄로 내려가고 제목 열은 히어로 폭을 다 쓴다. */
.lh-preview__hero{
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-4);
  align-items:flex-start;
}
.lh-preview__identity{
  /* 340px 미만이면 같은 줄에 액션을 두지 않는다(=제목 열 최소 260px 확보) */
  flex:1 1 340px;
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:var(--sp-4);
}
.lh-avatar{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--accent-tint);
  color:var(--accent-deep);
  font-size:26px;
  font-weight:780;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent);
}
.lh-preview__copy{min-width:0;}
.lh-preview__code{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border-radius:var(--radius-sm);
  background:var(--bg-surface-2);
  color:var(--accent-deep);
  font-family:var(--font-num);
  font-size:12px;
  font-weight:800;
}
.lh-preview h2{
  margin:8px 0 0;
  color:var(--text-strong);
  font-size:clamp(22px,2.2vw,30px);
  line-height:1.2;
  letter-spacing:0;
  word-break:keep-all;
  /* L1: `anywhere` 는 min-content 를 "한 글자"로 만들어 부모 flex/grid 가 제목 열을
     0 까지 줄여도 되는 것처럼 계산한다. `break-word` 는 줄바꿈 결과는 같지만
     min-content 가 "가장 긴 단어"라서 열이 통째로 붕괴하는 걸 구조적으로 막는다. */
  overflow-wrap:break-word;
}
.lh-preview__copy p{
  margin:7px 0 0;
  color:var(--text-muted);
  font-size:var(--fs-sm);
  line-height:1.45;
  word-break:keep-all;
}
.lh-actions{
  /* L1: 히어로가 좁으면 늘어나지도 억지로 버티지도 말고 아랫줄로 내려간다.
     아랫줄로 내려갔을 때도 margin-left:auto 로 카드 오른쪽에 붙여
     한 줄일 때(=넓은 폭)와 같은 "액션은 오른쪽" 규칙을 유지한다. */
  flex:0 1 auto;
  margin-left:auto;
  min-width:0;
  display:grid;
  justify-items:end;
  gap:10px;
}
.lh-actions__note{
  display:block;
  min-width:0;
  max-width:280px;
  color:var(--text-muted);
  font-size:12.5px;
  line-height:1.45;
  text-align:right;
  word-break:keep-all;
}
.lh-launch-mode{
  width:min(100%,340px);
  margin:0;
  padding:0;
  border:0;
}
.lh-launch-mode legend{
  margin:0 0 6px;
  color:var(--text-muted);
  font-size:var(--fs-xs);
  font-weight:760;
}
.lh-launch-mode > div{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.lh-launch-mode label{
  position:relative;
  min-width:0;
  display:block;
}
.lh-launch-mode input{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.lh-launch-mode label > span{
  min-width:0;
  min-height:44px;
  display:grid;
  place-items:center;
  padding:8px 10px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface-2);
  color:var(--text-body);
  font-size:var(--fs-sm);
  font-weight:740;
  line-height:1.25;
  word-break:keep-all;
  cursor:pointer;
}
.lh-launch-mode label:hover input:not(:disabled) + span{
  border-color:var(--border-strong);
  background:var(--bg-surface);
  color:var(--text-strong);
}
.lh-launch-mode input:checked + span{
  border-color:var(--accent);
  background:var(--accent-tint);
  color:var(--accent-deep);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent);
}
.lh-launch-mode input:focus-visible + span{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}
.lh-launch-mode input:disabled + span{
  cursor:not-allowed;
  opacity:.58;
}
.lh-continuity{
  min-width:0;
  display:grid;
  gap:var(--sp-3);
  padding:var(--sp-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  background:var(--bg-surface-2);
}
.lh-continuity__notice,
.lh-continuity__head{
  min-width:0;
}
.lh-continuity__notice p,
.lh-continuity__head p,
.lh-continuity__status{
  margin:7px 0 0;
  color:var(--text-body);
  font-size:var(--fs-sm);
  line-height:1.55;
  word-break:keep-all;
}
.lh-continuity__status.is-error{
  color:var(--warn-text);
}
.lh-continuity__head{
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:var(--sp-3);
}
.lh-continuity__head > span{
  flex:none;
  color:var(--accent-deep);
  font-family:var(--font-num);
  font-size:var(--fs-xs);
  font-weight:800;
  white-space:nowrap;
}
.lh-continuity__case-select{
  min-width:0;
  display:grid;
  gap:6px;
}
.lh-continuity__case-select > span{
  color:var(--text-muted);
  font-size:var(--fs-xs);
  font-weight:760;
}
.lh-continuity__case-select select{
  width:100%;
  min-height:44px;
  padding:8px 10px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface);
  color:var(--text-strong);
  font:inherit;
}
.lh-continuity__case-select select:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}
.lh-continuity__case-select select:disabled{
  cursor:not-allowed;
  opacity:.72;
}
.lh-summary{
  min-width:0;
  padding:var(--sp-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  background:var(--bg-surface-2);
}
.lh-summary p{
  margin:8px 0 0;
  color:var(--text-body);
  font-size:clamp(15px,1.2vw,18px);
  line-height:1.52;
  word-break:keep-all;
}
.lh-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:0;
}
.lh-facts div{
  min-width:0;
  min-height:64px;
  padding:12px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  background:var(--bg-surface-2);
}
.lh-facts dt{
  margin:0;
  color:var(--text-muted);
  font-size:12px;
  font-weight:720;
}
.lh-facts dd{
  margin:7px 0 0;
  color:var(--text-strong);
  font-size:14px;
  font-weight:720;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lh-activity{
  display:grid;
  gap:var(--sp-4);
  padding:var(--sp-5);
}
.lh-activity__stats,
.lh-continuity__stats{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.lh-activity__stats span,
.lh-continuity__stats span{
  min-width:0;
  min-height:58px;
  display:grid;
  align-content:center;
  gap:4px;
  padding:10px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  background:var(--bg-surface-2);
}
.lh-activity__stats b,
.lh-continuity__stats b{
  color:var(--text-strong);
  font-family:var(--font-num);
  font-size:22px;
  line-height:1;
}
.lh-activity__stats small,
.lh-continuity__stats small{
  color:var(--text-muted);
  font-size:12px;
  font-weight:720;
}
.lh-activity__recent{
  min-width:0;
  padding:var(--sp-4);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  background:var(--bg-surface-2);
}
.lh-activity__head{
  margin-bottom:10px;
}
.lh-session-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
  background:transparent;
  /* L2: 카드가 깨지는 기준은 뷰포트가 아니라 "카드 폭"이라 컨테이너 질의를 쓴다.
     같은 1181px 뷰포트에서도 목록 위치에 따라 카드 폭이 391px~794px 로 갈린다. */
  container:lh-session-list / inline-size;
}
.lh-session-list li{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(140px,.75fr) minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:13px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  background:var(--bg-surface);
}
/* L2(2026-07-27): 3열을 끝까지 붙들면 중앙 본문이 뭉개졌다.
   실측(폭 1181px, /learn/practice): 카드 391px 에서 열이
   "140px 67.27px 131.73px" 로 잡혀 본문이 67px, 제목 b("서연")가 24px,
   "라포 단계 · 0턴 / 날짜"가 4줄로 접혔다(폭 1280px 에서도 본문 166px).
   좌 140 + 본문 180 + 액션 132 + 갭 24 + 패딩 26 ≈ 500px 이 3열의 손익분기라
   여유를 둔 600px 아래에서는 액션을 아랫줄로 내리고 본문에 최소 180px 을 준다. */
@container lh-session-list (max-width:600px){
  .lh-session-list li{
    grid-template-columns:140px minmax(180px,1fr);
  }
  .lh-session-actions{
    grid-column:1 / -1;
  }
}
/* 2열(140+180+갭12+패딩26=358px)조차 못 넣는 폭에서는 완전 세로 스택 */
@container lh-session-list (max-width:380px){
  .lh-session-list li{
    grid-template-columns:minmax(0,1fr);
  }
}
.lh-session-card:hover{
  border-color:var(--border-strong);
  background:color-mix(in srgb,var(--bg-surface) 78%,var(--bg-surface-2));
}
.lh-session-card.is-active{
  border-color:color-mix(in srgb,var(--accent) 42%,var(--border-subtle));
}
.lh-session-card.is-review{
  border-color:color-mix(in srgb,var(--warn-solid) 35%,var(--border-subtle));
}
.lh-session-card__status{
  min-width:0;
  display:grid;
  grid-template-columns:10px minmax(0,1fr);
  gap:8px;
  align-items:start;
}
.lh-session-card__dot{
  width:8px;
  height:8px;
  margin-top:6px;
  border-radius:50%;
  background:var(--text-muted);
}
.lh-session-card.is-active .lh-session-card__dot{background:var(--accent);}
.lh-session-card.is-review .lh-session-card__dot{background:var(--warn-solid);}
.lh-session-card__status b{
  display:block;
  color:var(--text-strong);
  font-size:13px;
  line-height:1.25;
}
.lh-session-card__status small{
  display:block;
  margin-top:3px;
  color:var(--text-muted);
  font-size:12px;
  line-height:1.3;
}
.lh-session-card__body{
  min-width:0;
  display:grid;
  gap:7px;
}
.lh-session-card__title{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.lh-session-card__title span{
  flex:none;
  min-width:34px;
  min-height:24px;
  display:inline-grid;
  place-items:center;
  padding:0 7px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface-2);
  color:var(--text-strong);
  font-family:var(--font-num);
  font-size:11px;
  font-weight:840;
}
.lh-session-card__title b{
  min-width:0;
  color:var(--text-strong);
  font-size:14px;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lh-session-card__body p,
.lh-muted{
  margin:0;
  color:var(--text-muted);
  font-size:12px;
  line-height:1.45;
}
/* D3: "단계 · 턴 · 날짜"를 한 줄에 붙이면 가운뎃점이 2개다. 날짜를 컬럼으로 분리. */
.lh-session-card__body p{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:2px 14px;
}
.lh-session-card__progress{
  width:100%;
  height:5px;
  overflow:hidden;
  border-radius:999px;
  background:color-mix(in srgb,var(--border-subtle) 72%,transparent);
}
.lh-session-card__progress span{
  display:block;
  max-width:100%;
  height:100%;
  border-radius:inherit;
  background:var(--accent);
}
.lh-session-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}
.lh-review-link{
  flex:none;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface);
  color:var(--accent-deep);
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:720;
  min-height:30px;
  padding:5px 9px;
  cursor:pointer;
  white-space:nowrap;
}
.lh-review-link:hover{background:var(--accent-tint);}
.lh-review-link--ghost{color:var(--text-body);}
.lh-review-link--ghost:hover{color:var(--accent-deep);}
.lh-review-link:disabled{
  cursor:wait;
  opacity:.58;
}
.lh-review-link:disabled:hover{
  background:var(--bg-surface);
  color:var(--text-body);
}
.lh-inline-alert,
.lh-activity__empty{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:10px;
  align-items:start;
  padding:12px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  background:var(--bg-surface);
  color:var(--text-body);
}
.lh-inline-alert{
  display:flex;
  color:var(--warn-text);
  font-size:12px;
  line-height:1.45;
}
.lh-inline-alert--archive{
  margin-bottom:10px;
  color:var(--text-body);
}
.lh-activity__empty svg{
  margin-top:2px;
  color:var(--accent-deep);
}
.lh-activity__empty b{
  display:block;
  color:var(--text-strong);
  font-size:13px;
}
.lh-activity__empty p{
  margin:4px 0 0;
  color:var(--text-muted);
  font-size:12px;
  line-height:1.45;
}
.lh-persona-progress{
  display:grid;
  gap:10px;
  padding:var(--sp-5);
}
.lh-persona-progress__rows{
  display:grid;
  gap:8px;
}
.lh-persona-progress__row{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(86px,.8fr) minmax(0,1.2fr) minmax(90px,.7fr);
  gap:8px 10px;
  align-items:center;
  padding:10px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface-2);
  color:var(--text-body);
  text-align:left;
  cursor:pointer;
}
.lh-persona-progress__row:hover,
.lh-persona-progress__row.is-selected{
  border-color:color-mix(in srgb,var(--accent) 50%,var(--border-subtle));
  background:var(--accent-tint);
}
.lh-persona-progress__title{
  min-width:0;
  display:grid;
  gap:2px;
}
.lh-persona-progress__title b{
  color:var(--text-strong);
  font-family:var(--font-num);
  font-size:12px;
  line-height:1;
}
.lh-persona-progress__title em,
.lh-persona-progress__meta,
.lh-persona-progress__latest,
.lh-persona-progress__note{
  color:var(--text-muted);
  font-size:12px;
  line-height:1.35;
}
.lh-persona-progress__title em,
.lh-persona-progress__latest{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* D3: "N회 · N회 진행 · N회 리뷰 · 평균 N턴"은 가운뎃점이 3개였다.
   두 줄로 확정 분리해 줄마다 가운뎃점이 1개만 남게 한다. */
.lh-persona-progress__meta{
  min-width:0;
  display:grid;
  gap:2px;
}
.lh-persona-progress__meta > span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lh-persona-progress__title em{
  font-style:normal;
  font-weight:720;
}
.lh-persona-progress__bar{
  grid-column:1 / -1;
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:color-mix(in srgb,var(--border-subtle) 70%,transparent);
}
.lh-persona-progress__bar span{
  display:block;
  max-width:100%;
  height:100%;
  border-radius:inherit;
  background:var(--accent);
}
.lh-persona-progress__note{margin:0;}
.lh-archive-note{
  display:grid;
  gap:12px;
  padding:var(--sp-5);
}
.lh-archive-note__rows{
  display:grid;
  gap:8px;
}
.lh-archive-note__rows span{
  display:grid;
  gap:3px;
  padding:10px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--bg-surface-2);
}
.lh-archive-note__rows b{
  color:var(--text-strong);
  font-size:13px;
  line-height:1.25;
}
.lh-archive-note__rows small{
  color:var(--text-muted);
  font-size:12px;
  line-height:1.35;
}
.lh-error{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  color:var(--crit-text);
  background:var(--crit-tint);
  border-radius:var(--radius);
  padding:var(--sp-4);
}
.lh-error b{display:block;}
.lh-error p{margin:4px 0 0;font-size:var(--fs-sm);line-height:1.5;}
[data-theme="dark"] .lh-coach-hints span,
[data-theme="dark"] .lh-insight-list div,
[data-theme="dark"] .lh-compact-list li,
[data-theme="dark"] .lh-persona,
[data-theme="dark"] .lh-persona-progress__row{
  border-color:color-mix(in srgb, var(--accent) 11%, transparent);
  background:color-mix(in srgb, var(--text-strong) 4.5%, transparent);
}
[data-theme="dark"] .lh-recommend-card{
  border-color:color-mix(in srgb, var(--accent) 22%, transparent);
  background:
    linear-gradient(135deg,color-mix(in srgb, var(--accent) 12%, transparent),transparent 62%),
    color-mix(in srgb, var(--text-strong) 5.2%, transparent);
}
[data-theme="dark"] .lh-persona.is-selected,
[data-theme="dark"] .lh-persona-progress__row.is-selected{
  border-color:color-mix(in srgb, var(--accent) 66%, transparent);
  background:color-mix(in srgb, var(--accent) 13%, transparent);
}
@keyframes lhSkel{0%{background-position:120% 0}100%{background-position:-80% 0}}
/* 중간 폭(1181~1420px): 우측 사이드는 유지하되 리캡+코치 2열은 세로 스택으로.
   리캡 카드가 230px대로 붕괴해 세로 글자 줄바꿈이 생기는 문제 방지 (2026-07-14). */
@media (max-width:1420px){
  .lh-work-cluster__primary{
    grid-template-columns:1fr;
  }
}
@media (max-width:1180px){
  /* 1컬럼 세로 나열 대신 가로 탭으로 영역 전환(2026-07-15 소유자 피드백) */
  .lh-tabs{
    display:flex;
  }
  .lh-dashboard-grid{
    grid-template-columns:1fr;
  }
  .lh-dashboard-grid:not(.lh-grid--tab-today) .lh-work-cluster{
    display:none;
  }
  .lh-grid--tab-today .lh-dashboard-side{
    display:none;
  }
  .lh-grid--tab-records .lh-panel--growth{
    display:none;
  }
  .lh-grid--tab-growth .lh-panel--records{
    display:none;
  }
  .lh-dashboard-hero,
  .lh-dashboard-columns,
  .lh-history-layout,
  .lh-voice-practice-intent,
  .lh-practice-layout{
    grid-template-columns:1fr;
  }
  .lh-list-pane{
    position:relative;
    top:auto;
    max-height:none;
    overflow:visible;
  }
  .lh-work-cluster__primary{
    grid-template-columns:1fr;
  }
  .lh-dashboard-status{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .lh-personas{
    grid-template-columns:repeat(2,minmax(0,1fr));
    overflow:visible;
    padding-right:0;
  }
}
@media (max-width:860px){
  .lh-dashboard-status,
  .lh-metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .lh-work-cluster__secondary{
    grid-template-columns:1fr;
  }
  .lh-history-overview{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .lh-history-tools{
    grid-template-columns:1fr;
  }
  .lh-history-filter{
    justify-content:flex-start;
  }
  /* L1: 히어로가 flex-wrap 로 바뀌어 grid-template-columns 는 더 이상 쓰이지 않는다.
     이 구간은 폭과 무관하게 항상 액션을 아랫줄에 두던 기존 동작을 유지한다. */
  .lh-actions{
    flex-basis:100%;
    margin-left:0;
    justify-items:start;
  }
  .lh-actions__note{
    text-align:left;
    max-width:none;
  }
}
@media (max-width:720px){
  .lh-voice-practice-intent dl{
    grid-template-columns:1fr;
  }
  .lh-head{
    display:grid;
    gap:10px;
  }
  .lh-head__tools{
    width:100%;
    justify-content:flex-start;
    align-items:center;
  }
  .lh-head__status{
    justify-self:start;
  }
  .lh-title{
    font-size:22px;
  }
  .lh-sub{
    font-size:12.5px;
    line-height:1.45;
  }
  .lh-session-focus,
  .lh-coach-card,
  .lh-panel,
  .lh-work-cluster,
  .lh-list-pane,
  .lh-preview__main,
  .lh-activity,
  .lh-continuity,
  .lh-persona-progress,
  .lh-history-main,
  .lh-archive-note{
    padding:14px;
  }
  .lh-recap{
    grid-template-columns:1fr;
    gap:12px;
  }
  .lh-recap__avatar{
    min-height:120px;
  }
  .lh-recap__facts{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .lh-dashboard-status{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .lh-metric-card{
    min-height:0;
    padding:14px;
    border-radius:var(--radius);
  }
  .lh-personas{
    display:flex;
    grid-template-columns:none;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:2px;
  }
  .lh-persona{
    flex:0 0 min(82vw,320px);
    min-height:66px;
    grid-template-columns:38px minmax(0,1fr);
    align-items:center;
    padding:10px 38px 10px 10px;
  }
  .lh-persona__mark{width:34px;height:34px;}
  .lh-persona__summary{display:none;}
  .lh-preview__identity{
    grid-template-columns:54px minmax(0,1fr);
    gap:12px;
  }
  .lh-avatar{width:54px;height:54px;font-size:22px;}
  .lh-preview h2{font-size:20px;}
  .lh-facts{
    grid-template-columns:1fr;
    gap:8px;
  }
  .lh-facts div{
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:10px;
  }
  .lh-facts dd{
    margin:0;
    max-width:70%;
  }
  .lh-activity__stats,
  .lh-continuity__stats{
    gap:6px;
  }
  .lh-activity__stats span,
  .lh-continuity__stats span{
    min-height:46px;
    padding:8px 4px;
    text-align:center;
  }
  .lh-activity__stats b,
  .lh-continuity__stats b{font-size:17px;}
  .lh-activity__stats small,
  .lh-continuity__stats small{font-size:11px;}
  .lh-launch-mode{
    width:100%;
  }
  .lh-continuity__head{
    display:grid;
    gap:6px;
  }
  .lh-session-list li{
    grid-template-columns:1fr;
    gap:10px;
    align-items:start;
  }
  .lh-session-actions{
    justify-content:flex-start;
  }
  .lh-persona-progress__row{
    grid-template-columns:1fr;
    gap:6px;
  }
  .lh-persona-progress__title{
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:7px;
  }
  .lh-persona-progress__bar,
  .lh-persona-progress__latest{
    grid-column:auto;
  }
  .lh-persona-progress__meta,
  .lh-persona-progress__latest{
    white-space:normal;
  }
}
@media (max-width:460px){
  .lh-head__status{display:none;}
  .lh-head__primary{
    width:100%;
  }
  .lh-history-overview{
    grid-template-columns:1fr;
  }
  .lh-session-focus__head{
    display:grid;
    gap:10px;
  }
  .lh-session-focus__status{
    justify-self:start;
  }
  .lh-persona{
    flex-basis:min(78vw,300px);
    width:min(78vw,300px);
  }
  .lh-recap__facts{
    grid-template-columns:1fr;
  }
  .lh-session-actions{
    grid-column:1;
    grid-row:auto;
    gap:4px;
    flex-direction:row;
    justify-content:flex-start;
  }
  .lh-review-link{
    min-height:32px;
    padding:4px 7px;
  }
}
/* 초소형 폭(320~420px, iPhone SE급) 전용 밴드.
   기존 최소 브레이크포인트가 460px이라 이 구간이 비어 있었다.
   320px에서 페르소나 카드는 78vw(=249.6px)이고 마크 38px + 좌우 패딩 48px + 갭 11px를
   빼면 이름 칸이 150.6px밖에 안 남는다. 그래서
   "하린(가명) · 고3 · 진로갈등(부모기대 vs 본인욕구)"가 3줄(57px)을 요구하는데
   기본 -webkit-line-clamp:2(38px)에 걸려 마지막 줄 19px이 통째로 사라졌다
   (실측: clientHeight 38 / scrollHeight 57).
   → 이 구간만 3줄까지 허용해 이름이 온전히 보이게 한다. 그보다 더 길어져도
   -webkit-box + line-clamp를 유지하므로 세로로 깎이지 않고 말줄임(…)으로만 잘린다. */
@media (max-width:420px){
  .lh-persona__name{
    -webkit-line-clamp:3;
  }
}
@media (prefers-reduced-motion:reduce){
  .lh-skel__box,
  .lh-skel__line{animation:none;}
}

/* ═══ 학습자 포탈 개선(2026-07-14): 보완할 부분 · 라포 누적 · 이정표 ═══ */
.lh-weakness__list {
  display: grid;
  gap: 8px;
}
.lh-weakness__list button {
  display: grid;
  gap: 3px;
  text-align: left;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  color: inherit;
  cursor: pointer;
}
.lh-weakness__list button:hover {
  border-color: var(--border-focus);
}
.lh-weakness__list b {
  font-size: 12.5px;
  font-weight: 760;
  color: var(--text-strong);
}
.lh-weakness__list p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.lh-rapport-list {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.lh-rapport-row {
  display: grid;
  grid-template-columns: minmax(0, 88px) minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
}
.lh-rapport-row__name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lh-rapport-row__name small {
  margin-left: 4px;
  font-size: 10.5px;
  font-weight: 620;
  color: var(--text-muted);
}
.lh-rapport-row__bar {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--neutral-100);
  overflow: hidden;
}
.lh-rapport-row__bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.9s var(--ease-out);
}
.lh-rapport-row b {
  font-size: 11px;
  font-weight: 740;
  font-variant-numeric: tabular-nums;
  color: var(--text-body);
  text-align: right;
}
.lh-milestones__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lh-milestone {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  font-size: 11.5px;
  font-weight: 680;
  color: var(--text-muted);
}
.lh-milestone.is-done {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text-strong);
}
.lh-milestone.is-available {
  color: var(--text-body);
}

/* ═══ 학습 대시보드 보태니컬 시안 적용 ═══
   카드 광원은 좌상단, 황금 기운은 헤어라인과 가장자리에서만 아주 옅게 사용한다. */
.vg-shell--learner-dashboard .lh-root {
  --lh-gold: var(--clay-deep);
  --lh-botanical-hair: color-mix(in srgb, var(--lh-gold) 34%, var(--border-subtle));
  --lh-botanical-line: color-mix(in srgb, var(--lh-gold) 17%, var(--border-subtle));
  gap: clamp(18px, 2vw, 28px);
}
.vg-shell--learner-dashboard .lh-title {
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.vg-shell--learner-dashboard .lh-head__status {
  border-color: var(--lh-botanical-hair);
  background: var(--bg-surface-2);
  box-shadow: none;
}
.vg-shell--learner-dashboard .lh-dashboard-status {
  gap: 12px;
}
.vg-shell--learner-dashboard .lh-metric-card {
  --lh-card-art: url("/design-elements/learner-dashboard/card-leaf-sprig-light.png");
  position: relative;
  isolation: isolate;
  min-height: 132px;
  align-content: center;
  gap: 8px;
  overflow: hidden;
  padding: 18px 44% 18px 18px;
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.vg-shell--learner-dashboard .lh-metric-card:nth-child(2) {
  --lh-card-art: url("/design-elements/learner-dashboard/card-folded-ribbon-light.png");
}
.vg-shell--learner-dashboard .lh-metric-card:nth-child(3) {
  --lh-card-art: url("/design-elements/learner-dashboard/card-orbital-ring-light.png");
}
.vg-shell--learner-dashboard .lh-metric-card:nth-child(4) {
  --lh-card-art: url("/design-elements/learner-dashboard/card-flowing-ribbon-light.png");
}
.vg-shell--learner-dashboard .lh-metric-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8px 0 4px 51%;
  background: var(--lh-card-art) center / contain no-repeat;
  opacity: 0.68;
  filter: saturate(0.82) contrast(0.97);
  pointer-events: none;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.vg-shell--learner-dashboard .lh-metric-card > * {
  position: relative;
  z-index: 1;
}
.vg-shell--learner-dashboard .lh-metric-card:hover {
  transform: translateY(-2px);
}
.vg-shell--learner-dashboard .lh-metric-card:hover::after {
  transform: translate3d(-3px, -2px, 0) scale(1.025);
  opacity: 0.78;
}
.vg-shell--learner-dashboard .lh-metric-card span {
  color: color-mix(in srgb, var(--text-body) 88%, var(--lh-gold));
}
.vg-shell--learner-dashboard .lh-metric-card b {
  font-size: clamp(23px, 2.05vw, 30px);
  letter-spacing: -0.035em;
}
.vg-shell--learner-dashboard .lh-metric-card p {
  max-width: 19ch;
  color: var(--text-body);
}

.vg-shell--learner-dashboard .lh-work-cluster {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 2vw, 26px);
  border-radius: var(--radius-lg);
}
.vg-shell--learner-dashboard .lh-work-cluster::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--clay) 6%, transparent), transparent 22rem);
  pointer-events: none;
}
.vg-shell--learner-dashboard .lh-work-cluster > * {
  position: relative;
}
.vg-shell--learner-dashboard .lh-work-cluster__head {
  border-bottom-color: var(--lh-botanical-line);
}
.vg-shell--learner-dashboard .lh-recap__progress i,
.vg-shell--learner-dashboard .lh-rapport-row__bar {
  background: color-mix(in srgb, var(--lh-botanical-line) 72%, transparent);
}
.vg-shell--learner-dashboard .lh-coach-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.vg-shell--learner-dashboard .lh-coach-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -34px;
  right: -54px;
  width: 210px;
  height: 160px;
  background: url("/design-elements/learner-dashboard/card-paired-leaves-light.png") center / contain no-repeat;
  opacity: 0.28;
  pointer-events: none;
}
.vg-shell--learner-dashboard .lh-coach-card > div:first-child {
  padding-right: clamp(24px, 24%, 92px);
}
.vg-shell--learner-dashboard .lh-coach-card__cta {
  background:var(--accent);
  border-color:color-mix(in srgb,var(--accent-deep) 78%,var(--lh-gold));
  color:var(--text-on-accent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-surface) 28%, transparent);
}
.vg-shell--learner-dashboard .lh-coach-card__cta:hover:not(:disabled) {
  background:var(--accent-deep);
  color:var(--text-on-accent);
}
.vg-shell--learner-dashboard .lh-panel__head button,
.vg-shell--learner-dashboard .lh-panel__badge,
.vg-shell--learner-dashboard .lh-tabs {
  border-color: var(--lh-botanical-line);
}

[data-theme="dark"] .vg-shell--learner-dashboard .lh-root {
  --lh-gold: var(--clay);
  --lh-botanical-hair: color-mix(in srgb, var(--lh-gold) 27%, var(--border-subtle));
  --lh-botanical-line: color-mix(in srgb, var(--lh-gold) 16%, var(--border-subtle));
}
[data-theme="dark"] .vg-shell--learner-dashboard .lh-head__status {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--clay-tint) 5.5%, transparent);
}
[data-theme="dark"] .vg-shell--learner-dashboard .lh-metric-card {
  --lh-card-art: url("/design-elements/learner-dashboard/card-leaf-sprig.png");
}
[data-theme="dark"] .vg-shell--learner-dashboard .lh-metric-card:nth-child(2) {
  --lh-card-art: url("/design-elements/learner-dashboard/card-folded-ribbon.png");
}
[data-theme="dark"] .vg-shell--learner-dashboard .lh-metric-card:nth-child(3) {
  --lh-card-art: url("/design-elements/learner-dashboard/card-orbital-ring.png");
}
[data-theme="dark"] .vg-shell--learner-dashboard .lh-metric-card:nth-child(4) {
  --lh-card-art: url("/design-elements/learner-dashboard/card-flowing-ribbon.png");
}
[data-theme="dark"] .vg-shell--learner-dashboard .lh-metric-card::after {
  opacity: 0.56;
  filter: saturate(0.76) brightness(0.92);
}
[data-theme="dark"] .vg-shell--learner-dashboard .lh-work-cluster::before {
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--clay) 2.5%, transparent), transparent 38%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--clay) 5.5%, transparent), transparent 22rem);
}
[data-theme="dark"] .vg-shell--learner-dashboard .lh-coach-card::after {
  background-image: url("/design-elements/learner-dashboard/card-paired-leaves.png");
  opacity: 0.24;
}

@media (max-width: 1180px) {
  .vg-shell--learner-dashboard .lh-metric-card {
    min-height: 118px;
    padding: 15px 38% 15px 15px;
  }
  .vg-shell--learner-dashboard .lh-metric-card::after {
    inset: 6px 0 4px 55%;
  }
}
@media (max-width: 720px) {
  .vg-shell--learner-dashboard .lh-root {
    gap: 16px;
  }
  .vg-shell--learner-dashboard .lh-dashboard-status {
    gap: 8px;
  }
  .vg-shell--learner-dashboard .lh-metric-card {
    min-height: 104px;
    padding: 13px 34% 13px 13px;
  }
  .vg-shell--learner-dashboard .lh-metric-card::after {
    inset: 12px 0 8px 56%;
    opacity: 0.48;
  }
  [data-theme="dark"] .vg-shell--learner-dashboard .lh-metric-card::after {
    opacity: 0.4;
  }
  .vg-shell--learner-dashboard .lh-metric-card b {
    font-size: clamp(19px, 6vw, 24px);
  }
  .vg-shell--learner-dashboard .lh-metric-card p {
    font-size: 11px;
  }
  .vg-shell--learner-dashboard .lh-work-cluster {
    padding: 12px;
  }
  .vg-shell--learner-dashboard .lh-coach-card > div:first-child {
    padding-right: 18%;
  }
}

/* ── 보태니컬 시안 정합 2차: 1200px 기준 비율·세로 흐름·장식 크롭 ── */
.vg-shell--learner-dashboard .lh-tabs {
  display: flex;
}
.vg-shell--learner-dashboard .lh-dashboard-grid:not(.lh-grid--tab-today) .lh-work-cluster {
  display: none;
}
.vg-shell--learner-dashboard .lh-grid--tab-today .lh-dashboard-side {
  display: none;
}
.vg-shell--learner-dashboard .lh-grid--tab-records .lh-panel--growth {
  display: none;
}
.vg-shell--learner-dashboard .lh-grid--tab-growth .lh-panel--records {
  display: none;
}
@media (min-width: 1181px) {
  .vg-shell--learner-dashboard .lh-dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .vg-shell--learner-dashboard .lh-work-cluster__primary {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .vg-shell--learner-dashboard .lh-dashboard-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vg-shell--learner-dashboard .lh-dashboard-side__tabpanel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.vg-shell--learner-dashboard .lh-root {
  max-width: 100%;
  gap: 20px;
}
.vg-shell--learner-dashboard .lh-head {
  min-height: 104px;
  align-items: flex-start;
}
.vg-shell--learner-dashboard .lh-title {
  margin-top: 6px;
  font-size: clamp(29px, 2.7vw, 36px);
  line-height: 1.14;
}
.vg-shell--learner-dashboard .lh-sub {
  margin-top: 8px;
  font-size: 14px;
}
.vg-shell--learner-dashboard .lh-dashboard-status {
  gap: 14px;
}
.vg-shell--learner-dashboard .lh-metric-card {
  --lh-art-right: -16px;
  --lh-art-bottom: -24px;
  --lh-art-width: 52%;
  --lh-art-height: 112%;
  min-height: 160px;
  align-content: center;
  padding: 22px 43% 22px 22px;
  border-radius: 10px;
}
.vg-shell--learner-dashboard .lh-metric-card:nth-child(2) {
  --lh-art-right: -20px;
  --lh-art-bottom: -28px;
  --lh-art-width: 57%;
  --lh-art-height: 118%;
}
.vg-shell--learner-dashboard .lh-metric-card:nth-child(3) {
  --lh-art-right: -24px;
  --lh-art-bottom: -26px;
  --lh-art-width: 58%;
  --lh-art-height: 116%;
}
.vg-shell--learner-dashboard .lh-metric-card:nth-child(4) {
  --lh-art-right: -26px;
  --lh-art-bottom: -30px;
  --lh-art-width: 62%;
  --lh-art-height: 122%;
}
.vg-shell--learner-dashboard .lh-metric-card::after {
  inset: auto 0 0 auto;
  width: var(--lh-art-width);
  height: var(--lh-art-height);
  background-position: right var(--lh-art-right) bottom var(--lh-art-bottom);
}
.vg-shell--learner-dashboard .lh-metric-card b {
  font-size: clamp(26px, 2.35vw, 32px);
}

.vg-shell--learner-dashboard .lh-work-cluster {
  gap: 16px;
  padding: 20px;
  border-radius: 10px;
}
.vg-shell--learner-dashboard .lh-work-cluster__head {
  min-height: 68px;
  align-items: center;
  padding-bottom: 16px;
}
.vg-shell--learner-dashboard .lh-work-cluster__head h2 {
  font-size: clamp(22px, 2vw, 27px);
}
.vg-shell--learner-dashboard .lh-session-focus {
  --lh-focus-art-right: -20px;
  --lh-focus-art-bottom: -28px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 18px;
  min-height: 466px;
  padding: 28px;
  border-radius: 9px;
}
.vg-shell--learner-dashboard .lh-session-focus::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: var(--lh-focus-art-right);
  bottom: var(--lh-focus-art-bottom);
  width: clamp(190px, 29%, 270px);
  height: clamp(210px, 58%, 290px);
  background: url("/design-elements/learner-dashboard/card-leaf-sprig-light.png") right bottom / contain no-repeat;
  opacity: 0.22;
  pointer-events: none;
}
.vg-shell--learner-dashboard .lh-session-focus > * {
  position: relative;
  z-index: 1;
}
/* 위계 복구(2026-07-27): 이전 clamp(30px,3vw,38px)은 h1(clamp(29px,2.7vw,36px))보다
   커서 페르소나 이름이 페이지 제목을 눌렀다. h1 아래 단계로 내린다. */
.vg-shell--learner-dashboard .lh-session-focus__head h2 {
  font-size: clamp(21px, 1.95vw, 28px);
  font-weight: 820;
}
.vg-shell--learner-dashboard .lh-recap {
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 30px;
  padding-top: 18px;
}
.vg-shell--learner-dashboard .lh-recap__avatar {
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: 216px;
  min-height: 242px;
  aspect-ratio: 0.9;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.vg-shell--learner-dashboard .lh-recap__avatar .vg-avatar {
  position: relative;
  z-index: 1;
}
.vg-shell--learner-dashboard .lh-recap__body {
  align-content: start;
  gap: 14px;
}
.vg-shell--learner-dashboard .lh-recap__facts div {
  min-height: 62px;
  padding: 10px 12px;
}
.vg-shell--learner-dashboard .lh-recap__progress i {
  height: 9px;
}
.vg-shell--learner-dashboard .lh-recap__quote {
  min-height: 82px;
  padding: 12px 14px;
}
.vg-shell--learner-dashboard .lh-coach-card {
  min-height: 300px;
  gap: 14px;
  padding: 28px;
  border-radius: 9px;
}
.vg-shell--learner-dashboard .lh-coach-card::after {
  top: auto;
  right: 0;
  bottom: 0;
  width: 320px;
  height: 240px;
  background-position: right -42px bottom -28px;
  opacity: 0.24;
}
.vg-shell--learner-dashboard .lh-coach-card > div:first-child {
  padding-right: 34%;
}
.vg-shell--learner-dashboard .lh-coach-card h2 {
  font-size: clamp(25px, 2.45vw, 32px);
}
.vg-shell--learner-dashboard .lh-coach-card > div:first-child p {
  max-width: 64ch;
}
.vg-shell--learner-dashboard .lh-coach-hints {
  position: relative;
  z-index: 1;
}
.vg-shell--learner-dashboard .lh-coach-hints span {
  min-height: 44px;
  padding: 0 14px;
}
.vg-shell--learner-dashboard .lh-coach-card__cta {
  position: relative;
  z-index: 1;
  min-height: 48px;
}
.vg-shell--learner-dashboard .lh-work-cluster__secondary {
  margin-top: 2px;
}

[data-theme="dark"] .vg-shell--learner-dashboard .lh-root {
  --text-strong: var(--ink-0);
  --text-body: var(--ink-2);
  --text-muted: var(--ink-3);
  --lh-botanical-hair: color-mix(in srgb, var(--clay) 31%, transparent);
  --lh-botanical-line: color-mix(in srgb, var(--clay) 22%, transparent);
}
[data-theme="dark"] .vg-shell--learner-dashboard .lh-recap__avatar {
  border: 0;
  background: transparent;
  box-shadow: none;
}
[data-theme="dark"] .vg-shell--learner-dashboard .lh-session-focus::after {
  background-image: url("/design-elements/learner-dashboard/card-leaf-sprig.png");
  opacity: 0.2;
}

@media (max-width: 1180px) {
  .vg-shell--learner-dashboard .lh-head {
    min-height: auto;
  }
  .vg-shell--learner-dashboard .lh-metric-card {
    min-height: 126px;
  }
  .vg-shell--learner-dashboard .lh-session-focus {
    min-height: auto;
  }
  .vg-shell--learner-dashboard .lh-coach-card {
    min-height: auto;
  }
}
@media (max-width: 720px) {
  .vg-shell--learner-dashboard .lh-metric-card {
    min-height: 104px;
    padding: 13px 34% 13px 13px;
  }
  .vg-shell--learner-dashboard .lh-metric-card::after {
    inset: 12px 0 8px 56%;
    width: auto;
    height: auto;
    background-position: center;
  }
  .vg-shell--learner-dashboard .lh-metric-card b {
    font-size: clamp(19px, 6vw, 24px);
  }
  .vg-shell--learner-dashboard .lh-recap {
    grid-template-columns: 1fr;
  }
  .vg-shell--learner-dashboard .lh-recap__avatar {
    width: min(100%, 250px);
    min-height: 210px;
  }
  .vg-shell--learner-dashboard .lh-coach-card > div:first-child {
    padding-right: 20%;
  }
}