yunchan/vignette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(docs): 전체 페이지 레이아웃 시안 추가

Browse source 
- login/learner-home/session-review/professor/admin/settings
- session-v2(밝은 에디토리얼 톤으로 재제작, 기존 어두운 stage 대체)
- 전부 동일 디자인 토큰(세이지틸+테라코타), 윤찬 철칙 준수
This commit is contained in:
Yun Chan 2026-06-25 21:27:24 +09:00
parent 204726f707
commit d5b86c5f89
8 changed files with 3723 additions and 486 deletions
Download patch file Download diff file Expand all files Collapse all files

508
docs/mockups/session-review.html Normal file
View file

@ -0,0 +1,508 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>한신대 AI 심리상담 시뮬레이션 — 회기 종료 리뷰 시안</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.min.css">
<style>
/* =====================================================================
한신대 AI 심리상담 시뮬레이션 — 회기 종료 리뷰 화면 시안 (단일 파일)
토큰: DESIGN_CONCEPT.md §3 그대로. 외부 의존 = Pretendard CDN 1개.
철칙 준수: border-left 0 · 이모지 0 · 카드덤프 0 · 에디토리얼 미니멀 ·
순흑/순백 금지 · 강조는 weight/tint/kicker/dot로 · 점수/합불 없음.
===================================================================== */
:root{
/* 중성 베이스 (따뜻한 종이 + 잉크 네이비-그린) */
--paper:#FBFAF8; --paper-2:#F4F2EE; --surface:#FFFFFF;
--neutral-100:#ECEFF1; --neutral-150:#E5E1DA; --neutral-200:#D5DBDE; --neutral-400:#98A4A9;
--ink:#1C2A2A; --ink-2:#5A6663; --ink-3:#93A09C; --hair:#E5E1DA;
/* 악센트 세이지-틸 (주, 학습자) + 테라코타 (보조) */
--accent:#3E7A6E; --accent-deep:#316257; --accent-tint:#EEF4F2; --accent-bright:#5F968B;
--clay:#B0735C; --clay-deep:#94604C; --clay-tint:#F6F0EC;
/* 의미색 */
--pos-text:#2C6E49; --pos-solid:#3B8C5E; --pos-tint:#E8F3EC;
--warn-text:#8A5A00; --warn-solid:#C28A2C; --warn-tint:#FAF1E0;
--crit-text:#A8352C; --crit-solid:#C4453A; --crit-tint:#FAEAE8;
--info-text:#2E5A7A; --info-solid:#3C7299; --info-tint:#EAF1F6;
--text-on-accent:#FBFAF8;
--focus-ring:rgba(62,122,110,.45);
/* 폰트 */
--font-sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
--font-num:"Pretendard Variable","JetBrains Mono",ui-monospace,monospace;
/* spacing */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
--radius:8px; --radius-sm:6px; --radius-lg:12px;
--shadow-sm:0 1px 2px rgba(28,42,42,.05);
--shadow-md:0 4px 14px rgba(28,42,42,.07);
--ease-out:cubic-bezier(.22,.61,.36,1);
--maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
font-family:var(--font-sans); background:var(--paper); color:var(--ink);
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
letter-spacing:-0.01em; line-height:1.6;
}
.tab-num{font-variant-numeric:tabular-nums;}
.kicker{
font-family:var(--font-num); font-size:12px; font-weight:600;
letter-spacing:0.08em; color:var(--accent);
display:flex; align-items:center; gap:8px; margin-bottom:var(--sp-4);
}
.kicker .dot{width:6px; height:6px; border-radius:50%; background:var(--accent-bright);}
/* ============ 공통 헤더 (앱 셸 톱바) ============ */
.topbar{
height:56px; background:var(--surface); border-bottom:1px solid var(--hair);
display:flex; align-items:center; gap:var(--sp-6); padding:0 var(--sp-6);
position:sticky; top:0; z-index:10;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; letter-spacing:-0.02em; color:var(--ink);}
.brand .mk{width:22px; height:22px; display:flex; align-items:center; justify-content:center;}
.nav{display:flex; align-items:center; gap:2px; margin-left:var(--sp-4);}
.nav a{
font-size:13px; font-weight:500; color:var(--ink-3); text-decoration:none;
padding:7px 12px; border-radius:var(--radius-sm);
}
.nav a.on{color:var(--ink); font-weight:600; background:var(--accent-tint);}
.topbar .spacer{flex:1;}
.role{
display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-2); font-weight:500;
padding:6px 12px; border:1px solid var(--hair); border-radius:999px;
}
.role .d{width:7px; height:7px; border-radius:50%; background:var(--accent);}
/* ============ 본문 래퍼 ============ */
.wrap{max-width:var(--maxw); margin:0 auto; padding:var(--sp-7) var(--sp-6) var(--sp-8);}
/* ---- (1) 회기 요약 헤더 ---- */
.review-head{margin-bottom:var(--sp-7);}
.review-head .meta-row{
display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
font-size:13px; color:var(--ink-3); margin-bottom:var(--sp-4);
}
.review-head .meta-row .scn{color:var(--ink-2); font-weight:600;}
.review-head .meta-row .sep{width:3px; height:3px; border-radius:50%; background:var(--neutral-200);}
.review-head .meta-row .tag{
display:inline-flex; align-items:center; gap:7px;
font-size:12px; font-weight:600; color:var(--accent-deep);
background:var(--accent-tint); padding:4px 11px; border-radius:999px;
}
.review-head .meta-row .tag .d{width:6px; height:6px; border-radius:50%; background:var(--accent);}
.review-head .summary{
font-size:26px; line-height:1.45; font-weight:600; letter-spacing:-0.02em;
color:var(--ink); max-width:880px; margin-bottom:var(--sp-5);
}
.review-head .summary .hl{color:var(--accent-deep);}
.review-head .actions{display:flex; align-items:center; gap:var(--sp-3);}
.btn-ghost{
font-family:var(--font-sans); font-size:13px; font-weight:500; color:var(--ink-2);
border:1px solid var(--hair); background:var(--surface); padding:9px 16px; border-radius:var(--radius);
cursor:pointer; display:inline-flex; align-items:center; gap:8px;
}
.btn-ghost svg{width:15px; height:15px; stroke:var(--ink-2); fill:none;}
.btn-ghost:hover{border-color:var(--neutral-200); color:var(--ink);}
/* ---- 2단 레이아웃 ---- */
.cols{display:grid; grid-template-columns:1fr 360px; gap:var(--sp-7); align-items:start;}
/* ---- 가로 회기 타임라인 (단계 비례 막대) ---- */
.phasebar{margin-bottom:var(--sp-6);}
.phasebar .track{
display:flex; height:38px; border-radius:var(--radius); overflow:hidden;
border:1px solid var(--hair);
}
.phasebar .ph{
display:flex; align-items:center; justify-content:center; gap:8px;
font-size:12px; font-weight:600; color:var(--ink-2);
position:relative; border-right:1px solid var(--hair);
}
.phasebar .ph:last-child{border-right:none;}
.phasebar .ph.p1{background:var(--accent-tint);}
.phasebar .ph.p2{background:color-mix(in srgb,var(--accent-tint) 60%, var(--surface));}
.phasebar .ph.p3{background:color-mix(in srgb,var(--accent-tint) 35%, var(--surface));}
.phasebar .ph.p4{background:var(--surface);}
.phasebar .ph .pt{width:6px; height:6px; border-radius:50%; background:var(--accent-bright);}
.phasebar .axis{
display:flex; justify-content:space-between; margin-top:7px;
font-family:var(--font-num); font-size:11px; color:var(--ink-3); letter-spacing:0.02em;
}
/* ---- (2) 발화 타임라인 (대본 + 기법 라벨 + 코멘트) ---- */
.timeline{display:flex; flex-direction:column;}
.tl-turn{
display:grid; grid-template-columns:64px 1fr; column-gap:var(--sp-4);
padding:var(--sp-4) 0;
}
.tl-turn + .tl-turn{border-top:1px solid var(--paper-2);}
.tl-rail{display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:3px;}
.tl-rail .ts{font-family:var(--font-num); font-size:11px; color:var(--ink-3); letter-spacing:0.02em;}
.tl-rail .node{width:11px; height:11px; border-radius:50%; flex:none;}
.tl-rail .node.learner{background:var(--accent-bright);}
.tl-rail .node.client{background:var(--clay); opacity:.8;}
.tl-rail .stem{width:2px; flex:1; min-height:8px; background:var(--hair);}
.tl-body .who{
font-size:12px; font-weight:600; letter-spacing:0.02em; margin-bottom:5px;
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.tl-body .who.learner{color:var(--accent-deep);}
.tl-body .who.client{color:var(--clay-deep);}
/* 기법 라벨 칩 (배경 틴트, border 없음) */
.chip{
display:inline-flex; align-items:center; gap:6px;
font-size:11px; font-weight:600; letter-spacing:0; padding:2px 9px; border-radius:999px;
}
.chip .d{width:5px; height:5px; border-radius:50%;}
.chip.empathy{background:var(--pos-tint); color:var(--pos-text);} .chip.empathy .d{background:var(--pos-solid);}
.chip.explore{background:var(--accent-tint); color:var(--accent-deep);} .chip.explore .d{background:var(--accent);}
.chip.reflect{background:var(--info-tint); color:var(--info-text);} .chip.reflect .d{background:var(--info-solid);}
.chip.confront{background:var(--clay-tint); color:var(--clay-deep);} .chip.confront .d{background:var(--clay);}
.chip.closed{background:var(--warn-tint); color:var(--warn-text);} .chip.closed .d{background:var(--warn-solid);}
.tl-body .said{font-size:15px; line-height:1.6; color:var(--ink); max-width:600px;}
.tl-body .said.client{color:var(--ink-2);}
/* 슈퍼바이저 코멘트 (들여쓰기, 좌측바 없음 → tint 블록 + kicker dot) */
.sv{
margin-top:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-radius:var(--radius);
max-width:600px;
}
.sv.good{background:var(--accent-tint);}
.sv.grow{background:var(--warn-tint);}
.sv .lab{
font-size:11px; font-weight:600; letter-spacing:0.04em; margin-bottom:5px;
display:flex; align-items:center; gap:7px;
}
.sv .lab .d{width:6px; height:6px; border-radius:50%;}
.sv.good .lab{color:var(--accent-deep);} .sv.good .lab .d{background:var(--accent);}
.sv.grow .lab{color:var(--warn-text);} .sv.grow .lab .d{background:var(--warn-solid);}
.sv .lab .by{
font-family:var(--font-num); font-size:10px; font-weight:600; letter-spacing:0.04em;
color:var(--ink-3); margin-left:auto; text-transform:uppercase;
}
.sv .txt{font-size:13px; line-height:1.6; color:var(--ink-2);}
.sv .txt .ex{color:var(--ink); font-style:italic;}
/* ---- 우측 분석 사이드 ---- */
.side{display:flex; flex-direction:column; gap:var(--sp-7); position:sticky; top:88px;}
.panel{}
/* 지표 변화 (라포 0.4 → 0.7) — 점수 아님, 서술+화살표 */
.shift{display:flex; flex-direction:column; gap:var(--sp-5);}
.shift .item .top{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px;}
.shift .item .nm{font-size:14px; font-weight:600; color:var(--ink);}
.shift .item .delta{
font-size:12px; font-weight:600; color:var(--pos-text);
display:inline-flex; align-items:center; gap:6px;
}
.shift .item .delta svg{width:13px; height:13px; stroke:var(--pos-solid); fill:none;}
.shift .item .delta.flat{color:var(--ink-3);} .shift .item .delta.flat svg{stroke:var(--ink-3);}
/* 비교 막대: 시작(연함) → 종료(진함) 겹쳐 표현 */
.shift .gauge{position:relative; height:6px; background:var(--paper-2); border-radius:3px; overflow:hidden;}
.shift .gauge .start{position:absolute; left:0; top:0; height:100%; background:var(--neutral-150); border-radius:3px;}
.shift .gauge .end{position:absolute; left:0; top:0; height:100%; background:var(--accent-bright); border-radius:3px;}
.shift .gauge.clay .end{background:var(--clay);}
.shift .item .lvl{
display:flex; justify-content:space-between; margin-top:7px;
font-size:11px; color:var(--ink-3);
}
.shift .item .lvl .now{color:var(--ink-2); font-weight:600;}
/* 잘한 점 / 개선점 리스트 */
.points{display:flex; flex-direction:column; gap:var(--sp-3);}
.points .pt{display:grid; grid-template-columns:auto 1fr; column-gap:11px; align-items:start;}
.points .pt .mk{margin-top:6px; width:7px; height:7px; border-radius:50%; flex:none;}
.points.good .mk{background:var(--pos-solid);}
.points.grow .mk{background:var(--warn-solid);}
.points .pt .body{}
.points .pt .body .h{font-size:14px; font-weight:600; color:var(--ink); margin-bottom:2px;}
.points .pt .body .d{font-size:13px; color:var(--ink-2); line-height:1.55;}
.points .pt .body .d .at{font-family:var(--font-num); font-size:11px; color:var(--accent); font-weight:600; margin-left:6px;}
/* 다음 회기 한 문장 */
.nextline{
background:var(--accent-tint); border-radius:var(--radius); padding:var(--sp-4) var(--sp-5);
margin-top:var(--sp-2);
}
.nextline .lab{
font-family:var(--font-num); font-size:11px; font-weight:600; letter-spacing:0.06em;
color:var(--accent-deep); margin-bottom:7px; text-transform:uppercase;
}
.nextline .q{font-size:14px; line-height:1.6; color:var(--ink); font-weight:500;}
hr.sep{border:none; border-top:1px solid var(--hair); margin:var(--sp-6) 0;}
@media (max-width:1080px){
.cols{grid-template-columns:1fr;}
.side{position:static;}
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important;}
}
</style>
</head>
<body>
<!-- ============ 공통 헤더 ============ -->
<header class="topbar">
<div class="brand">
<span class="mk">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none"><circle cx="12" cy="12" r="9" stroke="#3E7A6E" stroke-width="2"/><circle cx="12" cy="12" r="3.4" fill="#B0735C"/></svg>
</span>
Vignette
</div>
<nav class="nav">
<a href="#">세션</a>
<a href="#" class="on">리뷰</a>
<a href="#">성장 기록</a>
<a href="#">시나리오</a>
</nav>
<div class="spacer"></div>
<div class="role"><span class="d"></span>학습자 · 김도현</div>
</header>
<main class="wrap">
<!-- ============ (1) 회기 요약 헤더 ============ -->
<header class="review-head">
<div class="meta-row">
<span class="kicker" style="margin:0;"><span class="dot"></span>회기 리뷰</span>
<span class="sep"></span>
<span class="scn">서연 · 17세 · 우울 호소 청소년</span>
<span class="sep"></span>
<span>회기 1 · 32분 14초 · 2026-06-25</span>
<span class="tag"><span class="d"></span>탐색 단계까지 진행</span>
</div>
<h1 class="summary">
라포는 <span class="hl">안정적으로 형성</span>됐어요. 다만 탐색 단계에서 닫힌 질문이 몇 차례 반복되면서,
서연이 막 열기 시작한 자기개방이 잠깐씩 멈췄습니다.
</h1>
<div class="actions">
<button class="btn-ghost">
<svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
오디오 다시듣기
</button>
<button class="btn-ghost">
<svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
PDF 내보내기
</button>
</div>
</header>
<div class="cols">
<!-- ============ (2) 발화 타임라인 ============ -->
<section>
<!-- 가로 단계 타임라인 (너비 = 소요 비례) -->
<div class="phasebar">
<div class="kicker"><span class="dot"></span>회기 흐름</div>
<div class="track">
<div class="ph p1" style="flex:1.4"><span class="pt"></span>라포 형성</div>
<div class="ph p2" style="flex:2.6"><span class="pt"></span>탐색</div>
<div class="ph p3" style="flex:1.0"><span class="pt"></span>개입</div>
<div class="ph p4" style="flex:0.8"><span class="pt"></span>정리</div>
</div>
<div class="axis tab-num"><span>00:00</span><span>09:12</span><span>24:30</span><span>32:14</span></div>
</div>
<div class="kicker" style="margin-top:var(--sp-6);"><span class="dot"></span>발화 타임라인</div>
<div class="timeline">
<!-- 턴 1: 학습자 개방형 질문 + 잘한 점 -->
<div class="tl-turn">
<div class="tl-rail">
<span class="ts">10:42</span>
<span class="node learner"></span>
<span class="stem"></span>
</div>
<div class="tl-body">
<div class="who learner">나 (학습자)
<span class="chip explore"><span class="d"></span>탐색 · 개방형 질문</span>
</div>
<div class="said">학교에 가는 게 많이 버겁게 느껴지는 것 같아요. 혹시 어떤 순간이 가장 힘든지 조금 더 들려줄 수 있을까요?</div>
<div class="sv good">
<div class="lab"><span class="d"></span>잘한 점<span class="by">교수자</span></div>
<div class="txt">서연이 먼저 꺼내기 어려워하던 지점을 압박 없이 열어줬어요. 시간 여유를 둔 표현("조금 더")이 안전감을 만들었습니다.</div>
</div>
</div>
</div>
<!-- 턴 2: 내담자 자기개방 -->
<div class="tl-turn">
<div class="tl-rail">
<span class="ts">11:05</span>
<span class="node client"></span>
<span class="stem"></span>
</div>
<div class="tl-body">
<div class="who client">서연 (내담자)</div>
<div class="said client">아침에… 눈을 뜨면요. 그냥 천장만 보고 있어요. 일어나야 하는 건 아는데, 몸이 안 움직여요. 그게 제일… 무서워요.</div>
</div>
</div>
<!-- 턴 3: 학습자 공감 반영 + 잘한 점 -->
<div class="tl-turn">
<div class="tl-rail">
<span class="ts">11:28</span>
<span class="node learner"></span>
<span class="stem"></span>
</div>
<div class="tl-body">
<div class="who learner">나 (학습자)
<span class="chip empathy"><span class="d"></span>공감 · 반영적 경청</span>
</div>
<div class="said">눈을 떠도 몸이 따라주지 않는 그 무력감이, 무섭게까지 느껴지는군요.</div>
<div class="sv good">
<div class="lab"><span class="d"></span>잘한 점<span class="by">AI 코멘트</span></div>
<div class="txt">내담자의 단어("무서워요")를 그대로 반영하며 감정의 강도까지 받아냈어요. 직후 서연의 자기개방이 한 단계 깊어졌습니다.</div>
</div>
</div>
</div>
<!-- 턴 4: 학습자 닫힌 질문 (개선점) -->
<div class="tl-turn">
<div class="tl-rail">
<span class="ts">16:54</span>
<span class="node learner"></span>
<span class="stem"></span>
</div>
<div class="tl-body">
<div class="who learner">나 (학습자)
<span class="chip closed"><span class="d"></span>닫힌 질문</span>
</div>
<div class="said">그럼 학교는 그냥 가기 싫은 거예요?</div>
<div class="sv grow">
<div class="lab"><span class="d"></span>살펴볼 점<span class="by">교수자</span></div>
<div class="txt">'예/아니오'로 닫히는 질문이라 서연이 "그런 건 아니고요…" 하고 짧게 답했어요. 같은 의도를
<span class="ex">"학교를 떠올리면 어떤 마음이 먼저 드는지 들려줄래요?"</span> 처럼 열어두면 자기개방이 이어졌을 거예요.</div>
</div>
</div>
</div>
<!-- 턴 5: 내담자 위축 반응 -->
<div class="tl-turn">
<div class="tl-rail">
<span class="ts">17:10</span>
<span class="node client"></span>
<span class="stem"></span>
</div>
<div class="tl-body">
<div class="who client">서연 (내담자)</div>
<div class="said client">…그런 건 아니고요. 그냥… 모르겠어요.</div>
</div>
</div>
<!-- 턴 6: 학습자 회복 (직면 후 다시 탐색) -->
<div class="tl-turn">
<div class="tl-rail">
<span class="ts">21:36</span>
<span class="node learner"></span>
<span class="stem" style="background:transparent;"></span>
</div>
<div class="tl-body">
<div class="who learner">나 (학습자)
<span class="chip reflect"><span class="d"></span>반영</span>
<span class="chip explore"><span class="d"></span>탐색</span>
</div>
<div class="said">방금 잠깐 말문이 막혔던 것 같아요. 괜찮아요, 천천히 해도 돼요. 요즘 친구들과 함께 있을 때는 어떤 느낌이 드는지 궁금해요.</div>
<div class="sv good">
<div class="lab"><span class="d"></span>잘한 점<span class="by">AI 코멘트</span></div>
<div class="txt">닫힌 질문 뒤 위축을 알아채고 페이스를 늦춘 회복이 좋았어요. 곧바로 열린 질문으로 전환해 대화가 다시 흐르기 시작했습니다.</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============ 우측 분석 사이드 ============ -->
<aside class="side">
<!-- (4) 이번 회기 지표 변화 -->
<section class="panel">
<div class="kicker"><span class="dot"></span>이번 회기 변화</div>
<div class="shift">
<div class="item">
<div class="top">
<span class="nm">라포 형성</span>
<span class="delta"><svg viewBox="0 0 24 24" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="9 7 17 7 17 15"/></svg>뚜렷이 깊어짐</span>
</div>
<div class="gauge">
<div class="start" style="width:40%"></div>
<div class="end" style="width:70%"></div>
</div>
<div class="lvl"><span>시작: 조심스러움</span><span class="now">종료: 신뢰가 자람</span></div>
</div>
<div class="item">
<div class="top">
<span class="nm">자기개방</span>
<span class="delta"><svg viewBox="0 0 24 24" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="9 7 17 7 17 15"/></svg>조금 열림</span>
</div>
<div class="gauge">
<div class="start" style="width:25%"></div>
<div class="end" style="width:52%"></div>
</div>
<div class="lvl"><span>시작: 단답 위주</span><span class="now">종료: 감정 단어 등장</span></div>
</div>
<div class="item">
<div class="top">
<span class="nm">정서 안정</span>
<span class="delta flat"><svg viewBox="0 0 24 24" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="12" x2="18" y2="12"/></svg>비슷함</span>
</div>
<div class="gauge clay">
<div class="start" style="width:38%"></div>
<div class="end" style="width:42%"></div>
</div>
<div class="lvl"><span>시작: 위축·불안</span><span class="now">종료: 여전히 조심스러움</span></div>
</div>
</div>
</section>
<hr class="sep">
<!-- (3) 슈퍼바이저 종합 — 잘한 점 -->
<section class="panel">
<div class="kicker"><span class="dot"></span>잘한 점</div>
<div class="points good">
<div class="pt"><span class="mk"></span><div class="body">
<div class="h">감정을 그대로 받아낸 반영</div>
<div class="d">서연의 표현을 빌려 무력감을 비춰줬고, 직후 자기개방이 깊어졌어요.<span class="at">11:28</span></div>
</div></div>
<div class="pt"><span class="mk"></span><div class="body">
<div class="h">위축을 알아챈 회복</div>
<div class="d">닫힌 질문 뒤 멈춤을 감지하고 페이스를 늦춰 안전감을 되찾았어요.<span class="at">21:36</span></div>
</div></div>
</div>
</section>
<!-- (3) 개선점 (최대 3, 빨강 남발 금지) -->
<section class="panel">
<div class="kicker"><span class="dot"></span>다음 회기 개선점</div>
<div class="points grow">
<div class="pt"><span class="mk"></span><div class="body">
<div class="h">닫힌 질문을 열어두기</div>
<div class="d">탐색 단계에서 '예/아니오' 질문이 3회 반복됐어요. 의도는 같아도 열린 형태로 바꿔보면 좋겠어요.<span class="at">16:54</span></div>
</div></div>
<div class="pt"><span class="mk"></span><div class="body">
<div class="h">침묵을 조금 더 견디기</div>
<div class="d">서연이 망설일 때 바로 다음 질문을 채우기보다, 잠깐의 여백을 두면 스스로 더 말할 공간이 생겨요.</div>
</div></div>
</div>
<div class="nextline">
<div class="lab">다음에 시도할 한 문장</div>
<div class="q">"그 마음을 떠올리면, 가장 먼저 어떤 장면이 생각나는지 들려줄래요?"</div>
</div>
</section>
</aside>
</div>
</main>
</body>
</html>