d5b86c5f89
- login/learner-home/session-review/professor/admin/settings - session-v2(밝은 에디토리얼 톤으로 재제작, 기존 어두운 stage 대체) - 전부 동일 디자인 토큰(세이지틸+테라코타), 윤찬 철칙 준수
459 lines
22 KiB
HTML
459 lines
22 KiB
HTML
<!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 심리상담 시뮬레이션 — 학습자 홈 (단일 파일, 인라인 CSS)
|
|
토큰: DESIGN_CONCEPT.md §3 그대로. 외부 의존 = Pretendard CDN 1개.
|
|
철칙 준수: border-left 0 · 이모지 0 (아이콘 inline SVG) · 카드격자 덤프 0
|
|
순흑/순백 금지 · 강조는 weight/tint/kicker/dot로만 · 넉넉한 여백.
|
|
역할 = 학습자(세이지-틸 accent).
|
|
===================================================================== */
|
|
: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;
|
|
--neutral-sig:#8895A2;
|
|
/* 별칭 */
|
|
--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;
|
|
--maxw:1120px;
|
|
--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);
|
|
}
|
|
*{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; letter-spacing:-0.01em;}
|
|
|
|
/* ============ 공통 헤더 (앱 셸 톱바) ============ */
|
|
.topbar{
|
|
height:56px; background:var(--surface); border-bottom:1px solid var(--hair);
|
|
display:flex; align-items:center; gap:var(--sp-7);
|
|
padding:0 var(--sp-6); position:sticky; top:0; z-index:10;
|
|
}
|
|
.brand{display:flex; align-items:center; gap:10px; flex:none;}
|
|
.brand .mark{display:flex; align-items:center; justify-content:center; width:26px; height:26px;}
|
|
.brand .mark svg{width:26px; height:26px;}
|
|
.brand .wm{font-size:17px; font-weight:700; letter-spacing:-0.02em; color:var(--ink);}
|
|
.brand .wm .v{color:var(--accent);}
|
|
.nav{display:flex; align-items:center; gap:2px; margin-left:var(--sp-2);}
|
|
.nav a{
|
|
font-size:14px; font-weight:500; color:var(--ink-3); text-decoration:none;
|
|
padding:7px 14px; border-radius:var(--radius-sm); transition:color .16s var(--ease-out);
|
|
}
|
|
.nav a:hover{color:var(--ink-2);}
|
|
.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:13px; color:var(--ink-2); font-weight:500;
|
|
}
|
|
.role .dot{width:7px; height:7px; border-radius:50%; background:var(--accent);}
|
|
.role .sep{width:1px; height:16px; background:var(--hair); margin:0 4px;}
|
|
.role .who{font-weight:600; color:var(--ink);}
|
|
.avatar-chip{
|
|
width:30px; height:30px; border-radius:50%; background:var(--accent-tint);
|
|
display:flex; align-items:center; justify-content:center;
|
|
font-size:12px; font-weight:700; color:var(--accent-deep); flex:none;
|
|
}
|
|
|
|
/* ============ 본문 ============ */
|
|
.wrap{max-width:var(--maxw); margin:0 auto; padding:var(--sp-7) var(--sp-6) var(--sp-8);}
|
|
|
|
/* ── (1) 인사 + 이번주 현황 한 줄 ── */
|
|
.hero{margin-bottom:var(--sp-7);}
|
|
.hero .greet{font-size:30px; font-weight:700; letter-spacing:-0.02em; line-height:1.3; color:var(--ink);}
|
|
.hero .greet .name{color:var(--accent-deep);}
|
|
.weekline{
|
|
margin-top:var(--sp-4); display:flex; align-items:center; flex-wrap:wrap;
|
|
gap:var(--sp-5); font-size:15px; color:var(--ink-2);
|
|
}
|
|
.weekline .k{
|
|
font-family:var(--font-num); font-size:12px; font-weight:600; letter-spacing:0.08em;
|
|
color:var(--accent); display:inline-flex; align-items:center; gap:7px;
|
|
}
|
|
.weekline .k .dot{width:6px; height:6px; border-radius:50%; background:var(--accent-bright);}
|
|
.weekline .stat{display:inline-flex; align-items:baseline; gap:6px;}
|
|
.weekline .stat .num{font-size:19px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;}
|
|
.weekline .stat .lab{font-size:14px; color:var(--ink-3);}
|
|
.weekline .vsep{width:1px; height:16px; background:var(--hair);}
|
|
|
|
/* 섹션 공통 */
|
|
.section{margin-top:var(--sp-8);}
|
|
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--sp-5);}
|
|
.sec-head .ttl{font-size:20px; font-weight:600; letter-spacing:-0.01em; color:var(--ink);}
|
|
.sec-head .sub{font-size:13px; color:var(--ink-3); margin-top:3px;}
|
|
.sec-head .link{
|
|
font-size:13px; font-weight:500; color:var(--accent-deep); text-decoration:none;
|
|
display:inline-flex; align-items:center; gap:5px;
|
|
}
|
|
.sec-head .link svg{width:13px; height:13px; stroke:var(--accent-deep);}
|
|
.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:8px;
|
|
}
|
|
.kicker .dot{width:6px; height:6px; border-radius:50%; background:var(--accent-bright);}
|
|
|
|
/* ── (2) 내 상담 세션 목록 (리스트/테이블형) ── */
|
|
.sessions{
|
|
background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-lg);
|
|
overflow:hidden;
|
|
}
|
|
.s-head, .s-row{
|
|
display:grid;
|
|
grid-template-columns:108px 1.4fr 64px 1fr 1.5fr 96px;
|
|
align-items:center; gap:var(--sp-4);
|
|
padding:var(--sp-4) var(--sp-5);
|
|
}
|
|
.s-head{
|
|
background:var(--paper-2); border-bottom:1px solid var(--hair);
|
|
font-size:12px; font-weight:600; letter-spacing:0.02em; color:var(--ink-3);
|
|
}
|
|
.s-row{border-bottom:1px solid var(--paper-2); transition:background .14s var(--ease-out);}
|
|
.s-row:last-child{border-bottom:none;}
|
|
.s-row:hover{background:var(--paper);}
|
|
.s-row .date{font-family:var(--font-num); font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums;}
|
|
.s-row .date .wd{display:block; font-size:11px; color:var(--ink-3); margin-top:1px;}
|
|
/* 내담자 페르소나 */
|
|
.persona{display:flex; align-items:center; gap:10px;}
|
|
.persona .pf{
|
|
width:30px; height:30px; border-radius:50%; flex:none;
|
|
display:flex; align-items:center; justify-content:center;
|
|
font-size:12px; font-weight:700;
|
|
}
|
|
.persona .pf.a{background:var(--clay-tint); color:var(--clay-deep);}
|
|
.persona .pf.b{background:var(--accent-tint); color:var(--accent-deep);}
|
|
.persona .pf.c{background:var(--info-tint); color:var(--info-text);}
|
|
.persona .pn{font-size:14px; font-weight:600; color:var(--ink); line-height:1.35;}
|
|
.persona .pn .meta{display:block; font-size:12px; font-weight:400; color:var(--ink-3); margin-top:1px;}
|
|
.sess{font-family:var(--font-num); font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums;}
|
|
/* 단계 도달 (인라인 미니 트랙) */
|
|
.reach{display:flex; flex-direction:column; gap:6px;}
|
|
.reach .rl{font-size:13px; color:var(--ink); font-weight:500;}
|
|
.reach .seg{display:flex; align-items:center; gap:4px;}
|
|
.reach .seg span{height:4px; flex:1; border-radius:2px; background:var(--neutral-150);}
|
|
.reach .seg span.done{background:var(--accent-bright);}
|
|
.reach .seg span.cur{background:var(--accent);}
|
|
/* 피드백 요약 */
|
|
.fb{display:flex; align-items:flex-start; gap:9px;}
|
|
.fb .fd{width:8px; height:8px; border-radius:50%; flex:none; margin-top:6px;}
|
|
.fb .fd.pos{background:var(--pos-solid);}
|
|
.fb .fd.warn{background:var(--warn-solid);}
|
|
.fb .fd.info{background:var(--info-solid);}
|
|
.fb .fd.neu{background:var(--neutral-sig);}
|
|
.fb .ft{font-size:13px; color:var(--ink-2); line-height:1.5;}
|
|
/* 상태 칩 (배경 틴트 + 텍스트, border 없음) */
|
|
.status{
|
|
display:inline-flex; align-items:center; gap:6px; justify-self:start;
|
|
font-size:12px; font-weight:600; padding:4px 10px; border-radius:100px; white-space:nowrap;
|
|
}
|
|
.status .sd{width:6px; height:6px; border-radius:50%;}
|
|
.status.done{background:var(--pos-tint); color:var(--pos-text);} .status.done .sd{background:var(--pos-solid);}
|
|
.status.review{background:var(--info-tint); color:var(--info-text);} .status.review .sd{background:var(--info-solid);}
|
|
.status.draft{background:var(--paper-2); color:var(--ink-3);} .status.draft .sd{background:var(--neutral-sig);}
|
|
|
|
/* ── (3) 성장 한눈에 (small-multiples 라인 3개) ── */
|
|
.growth-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5);}
|
|
.spark{
|
|
background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-lg);
|
|
padding:var(--sp-5);
|
|
}
|
|
.spark .label{font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-0.01em;}
|
|
.spark .now{display:flex; align-items:baseline; gap:8px; margin-top:6px;}
|
|
.spark .now .v{font-size:26px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-0.02em;}
|
|
.spark .now .delta{font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:3px;}
|
|
.spark .now .delta.up{color:var(--pos-text);}
|
|
.spark .now .delta.flat{color:var(--ink-3);}
|
|
.spark .now .delta svg{width:11px; height:11px;}
|
|
.spark .chart{margin-top:var(--sp-4); width:100%; height:56px; display:block;}
|
|
.spark .axis{display:flex; justify-content:space-between; margin-top:8px; font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums;}
|
|
|
|
/* ── (4) 다음 연습 시작 CTA ── */
|
|
.cta{
|
|
margin-top:var(--sp-8);
|
|
background:var(--accent-tint); border-radius:var(--radius-lg);
|
|
padding:var(--sp-6) var(--sp-7);
|
|
display:flex; align-items:center; gap:var(--sp-6); flex-wrap:wrap;
|
|
}
|
|
.cta .body{flex:1; min-width:280px;}
|
|
.cta .body .kk{
|
|
font-family:var(--font-num); font-size:12px; font-weight:600; letter-spacing:0.08em;
|
|
color:var(--accent-deep); display:flex; align-items:center; gap:8px; margin-bottom:8px;
|
|
}
|
|
.cta .body .kk .dot{width:6px; height:6px; border-radius:50%; background:var(--accent);}
|
|
.cta .body h3{font-size:22px; font-weight:700; color:var(--ink); letter-spacing:-0.02em; line-height:1.35;}
|
|
.cta .body p{font-size:14px; color:var(--ink-2); margin-top:6px; max-width:520px;}
|
|
.cta .body .tags{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}
|
|
.cta .body .tag{
|
|
font-size:12px; font-weight:500; color:var(--accent-deep);
|
|
background:var(--surface); padding:5px 11px; border-radius:100px;
|
|
}
|
|
.btn-primary{
|
|
font-family:var(--font-sans); font-size:15px; font-weight:600; color:var(--text-on-accent);
|
|
background:var(--accent); border:none; padding:14px 26px; border-radius:var(--radius);
|
|
cursor:pointer; display:inline-flex; align-items:center; gap:9px; flex:none;
|
|
transition:background .16s var(--ease-out);
|
|
}
|
|
.btn-primary:hover{background:var(--accent-deep);}
|
|
.btn-primary svg{width:18px; height:18px; stroke:var(--text-on-accent);}
|
|
.cta .alt{
|
|
font-size:13px; font-weight:500; color:var(--ink-2); text-decoration:none;
|
|
margin-top:10px; display:inline-flex; align-items:center; gap:5px;
|
|
}
|
|
.cta .alt svg{width:13px; height:13px; stroke:var(--ink-2);}
|
|
.cta-actions{display:flex; flex-direction:column; align-items:flex-end; flex:none;}
|
|
|
|
@media (max-width:920px){
|
|
.growth-grid{grid-template-columns:1fr;}
|
|
.s-head{display:none;}
|
|
.s-row{grid-template-columns:1fr 1fr; row-gap:var(--sp-3); padding:var(--sp-5);}
|
|
.nav{display:none;}
|
|
}
|
|
@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="mark">
|
|
<svg viewBox="0 0 26 26" fill="none" aria-hidden="true">
|
|
<circle cx="13" cy="13" r="11" stroke="#3E7A6E" stroke-width="2"/>
|
|
<path d="M8 14.5c1.4 1.7 3 2.5 5 2.5s3.6-.8 5-2.5" stroke="#3E7A6E" stroke-width="2" stroke-linecap="round"/>
|
|
<circle cx="13" cy="9" r="1.6" fill="#B0735C"/>
|
|
</svg>
|
|
</span>
|
|
<span class="wm"><span class="v">Vignette</span></span>
|
|
</div>
|
|
<nav class="nav">
|
|
<a href="#" class="on">홈</a>
|
|
<a href="#">연습실</a>
|
|
<a href="#">내 회기</a>
|
|
<a href="#">성장 기록</a>
|
|
</nav>
|
|
<span class="spacer"></span>
|
|
<div class="role">
|
|
<span class="dot"></span>학습자
|
|
<span class="sep"></span>
|
|
<span class="who">김도윤</span>
|
|
</div>
|
|
<div class="avatar-chip">도</div>
|
|
</header>
|
|
|
|
<main class="wrap">
|
|
|
|
<!-- ── (1) 인사 + 이번주 현황 ── -->
|
|
<section class="hero">
|
|
<h1 class="greet">안녕하세요 <span class="name">도윤</span>님, 오늘도 한 회기 들어가 볼까요.</h1>
|
|
<div class="weekline">
|
|
<span class="k"><span class="dot"></span>이번 주 연습</span>
|
|
<span class="stat"><span class="num">3</span><span class="lab">회기 완료</span></span>
|
|
<span class="vsep"></span>
|
|
<span class="stat"><span class="num">2</span><span class="lab">리뷰 확인 대기</span></span>
|
|
<span class="vsep"></span>
|
|
<span class="stat"><span class="num">주 4회</span><span class="lab">목표까지 1회</span></span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── (2) 내 상담 세션 목록 ── -->
|
|
<section class="section">
|
|
<div class="sec-head">
|
|
<div>
|
|
<div class="ttl">내 상담 세션</div>
|
|
<div class="sub">최근 진행한 회기와 받은 피드백을 한눈에 봅니다</div>
|
|
</div>
|
|
<a href="#" class="link">전체 보기
|
|
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="sessions">
|
|
<div class="s-head">
|
|
<span>날짜</span>
|
|
<span>내담자 (페르소나)</span>
|
|
<span>회기</span>
|
|
<span>단계 도달</span>
|
|
<span>받은 피드백 요약</span>
|
|
<span>상태</span>
|
|
</div>
|
|
|
|
<!-- row 1 -->
|
|
<div class="s-row">
|
|
<div class="date tab-num">06.24<span class="wd">화 · 어제</span></div>
|
|
<div class="persona">
|
|
<span class="pf a">서</span>
|
|
<span class="pn">서연<span class="meta">17세 · 우울 호소 청소년</span></span>
|
|
</div>
|
|
<div class="sess">회기 1</div>
|
|
<div class="reach">
|
|
<span class="rl">탐색까지</span>
|
|
<span class="seg"><span class="done"></span><span class="cur"></span><span></span><span></span></span>
|
|
</div>
|
|
<div class="fb"><span class="fd warn"></span><span class="ft">라포는 좋았으나 닫힌 질문이 반복돼 자기개방이 일찍 멈췄어요</span></div>
|
|
<span class="status review"><span class="sd"></span>리뷰 도착</span>
|
|
</div>
|
|
|
|
<!-- row 2 -->
|
|
<div class="s-row">
|
|
<div class="date tab-num">06.22<span class="wd">일</span></div>
|
|
<div class="persona">
|
|
<span class="pf b">민</span>
|
|
<span class="pn">민준<span class="meta">24세 · 불안·공황 호소</span></span>
|
|
</div>
|
|
<div class="sess">회기 2</div>
|
|
<div class="reach">
|
|
<span class="rl">개입까지</span>
|
|
<span class="seg"><span class="done"></span><span class="done"></span><span class="cur"></span><span></span></span>
|
|
</div>
|
|
<div class="fb"><span class="fd pos"></span><span class="ft">반영적 경청이 안정적이었고 개입 시점 판단이 적절했어요</span></div>
|
|
<span class="status done"><span class="sd"></span>완료</span>
|
|
</div>
|
|
|
|
<!-- row 3 -->
|
|
<div class="s-row">
|
|
<div class="date tab-num">06.19<span class="wd">목</span></div>
|
|
<div class="persona">
|
|
<span class="pf c">하</span>
|
|
<span class="pn">하은<span class="meta">16세 · 또래관계·등교 거부</span></span>
|
|
</div>
|
|
<div class="sess">회기 1</div>
|
|
<div class="reach">
|
|
<span class="rl">라포까지</span>
|
|
<span class="seg"><span class="cur"></span><span></span><span></span><span></span></span>
|
|
</div>
|
|
<div class="fb"><span class="fd info"></span><span class="ft">초반 침묵을 견디는 호흡이 좋았어요. 개방형 질문 연결을 더 연습해 보세요</span></div>
|
|
<span class="status done"><span class="sd"></span>완료</span>
|
|
</div>
|
|
|
|
<!-- row 4 -->
|
|
<div class="s-row">
|
|
<div class="date tab-num">06.17<span class="wd">화</span></div>
|
|
<div class="persona">
|
|
<span class="pf a">서</span>
|
|
<span class="pn">서연<span class="meta">17세 · 우울 호소 청소년</span></span>
|
|
</div>
|
|
<div class="sess">회기 1·중단</div>
|
|
<div class="reach">
|
|
<span class="rl">라포 진행 중</span>
|
|
<span class="seg"><span class="cur"></span><span></span><span></span><span></span></span>
|
|
</div>
|
|
<div class="fb"><span class="fd neu"></span><span class="ft">8분에 일시정지 후 종료 — 이어서 다시 시도해 볼 수 있어요</span></div>
|
|
<span class="status draft"><span class="sd"></span>이어하기</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── (3) 성장 한눈에 (small-multiples 라인 3개, 레이더 금지) ── -->
|
|
<section class="section">
|
|
<div class="sec-head">
|
|
<div>
|
|
<div class="ttl">성장 한눈에</div>
|
|
<div class="sub">최근 8회기 추이 — 점수가 아니라 흐름으로 봅니다</div>
|
|
</div>
|
|
<a href="#" class="link">상세 추이
|
|
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="growth-grid">
|
|
<!-- 라포 형성 -->
|
|
<div class="spark">
|
|
<div class="label">라포 형성</div>
|
|
<div class="now">
|
|
<span class="v">안정</span>
|
|
<span class="delta up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 14 12 8 18 14"/></svg>꾸준히 향상</span>
|
|
</div>
|
|
<svg class="chart" viewBox="0 0 240 56" preserveAspectRatio="none" aria-label="라포 형성 추이">
|
|
<line x1="0" y1="55" x2="240" y2="55" stroke="#E5E1DA" stroke-width="1"/>
|
|
<polyline points="4,42 38,40 72,34 106,33 140,26 174,22 208,18 236,14" fill="none" stroke="#5F968B" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="236" cy="14" r="3.2" fill="#3E7A6E"/>
|
|
</svg>
|
|
<div class="axis"><span>1회기</span><span>8회기</span></div>
|
|
</div>
|
|
|
|
<!-- 기법 사용 -->
|
|
<div class="spark">
|
|
<div class="label">기법 사용 (개방형 질문)</div>
|
|
<div class="now">
|
|
<span class="v">늘어남</span>
|
|
<span class="delta up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 14 12 8 18 14"/></svg>닫힌 질문 감소</span>
|
|
</div>
|
|
<svg class="chart" viewBox="0 0 240 56" preserveAspectRatio="none" aria-label="기법 사용 추이">
|
|
<line x1="0" y1="55" x2="240" y2="55" stroke="#E5E1DA" stroke-width="1"/>
|
|
<polyline points="4,44 38,46 72,38 106,40 140,32 174,30 208,24 236,20" fill="none" stroke="#5F968B" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="236" cy="20" r="3.2" fill="#3E7A6E"/>
|
|
</svg>
|
|
<div class="axis"><span>1회기</span><span>8회기</span></div>
|
|
</div>
|
|
|
|
<!-- 개입 정확도 -->
|
|
<div class="spark">
|
|
<div class="label">개입 정확도 (시점·기법)</div>
|
|
<div class="now">
|
|
<span class="v">발전 중</span>
|
|
<span class="delta flat"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="12" x2="18" y2="12"/></svg>최근 평탄</span>
|
|
</div>
|
|
<svg class="chart" viewBox="0 0 240 56" preserveAspectRatio="none" aria-label="개입 정확도 추이">
|
|
<line x1="0" y1="55" x2="240" y2="55" stroke="#E5E1DA" stroke-width="1"/>
|
|
<polyline points="4,40 38,34 72,36 106,28 140,30 174,27 208,28 236,26" fill="none" stroke="#5F968B" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="236" cy="26" r="3.2" fill="#3E7A6E"/>
|
|
</svg>
|
|
<div class="axis"><span>1회기</span><span>8회기</span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── (4) 다음 연습 시작 CTA ── -->
|
|
<section class="cta">
|
|
<div class="body">
|
|
<div class="kk"><span class="dot"></span>다음 연습 추천</div>
|
|
<h3>서연 회기 2 — 탐색 단계 이어가기</h3>
|
|
<p>지난 회기에서 닫힌 질문이 반복됐어요. 이번엔 개방형 질문으로 자기개방을 끌어내는 데 집중해 보세요.</p>
|
|
<div class="tags">
|
|
<span class="tag">우울 호소 청소년</span>
|
|
<span class="tag">탐색 단계</span>
|
|
<span class="tag">목표: 개방형 질문</span>
|
|
</div>
|
|
</div>
|
|
<div class="cta-actions">
|
|
<button class="btn-primary">
|
|
연습 시작
|
|
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
|
</button>
|
|
<a href="#" class="alt">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v4l3 2"/></svg>
|
|
다른 페르소나 고르기
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
</body>
|
|
</html>
|