2851 lines
68 KiB
CSS
2851 lines
68 KiB
CSS
.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%;
|
|
}
|
|
}
|