434 lines
14 KiB
HTML
434 lines
14 KiB
HTML
<!doctype html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
|
||
<title>9x16 모바일 리디자인 슬라이드</title>
|
||
<style>
|
||
:root{
|
||
/* Brand palette (DB 계열 유사 톤) */
|
||
--brand-green:#0a8a63;
|
||
--brand-green-700:#086b4d;
|
||
--brand-green-50:#e8f6f0;
|
||
--brand-orange:#ff7a00;
|
||
--brand-yellow:#ffd24d;
|
||
--brand-sky:#e8f4ff;
|
||
--ink:#111111;
|
||
--ink-2:#333333;
|
||
--ink-3:#555e65;
|
||
--line:#e6eaee;
|
||
--bg:#f6f8f9;
|
||
--surface:#ffffff;
|
||
|
||
/* Typography */
|
||
--font-sans: -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",Segoe UI,Roboto,system-ui,Helvetica,Arial,sans-serif;
|
||
--fs-xxl: clamp(20px, 3.5vw, 26px);
|
||
--fs-xl: clamp(18px, 3.2vw, 22px);
|
||
--fs-lg: clamp(16px, 3vw, 20px);
|
||
--fs-md: clamp(14px, 2.8vw, 18px);
|
||
--fs-sm: clamp(12px, 2.4vw, 16px);
|
||
--fs-xs: clamp(11px, 2.1vw, 14px);
|
||
|
||
/* Spacing scale */
|
||
--space-0: 0;
|
||
--space-1: 4px;
|
||
--space-2: 8px;
|
||
--space-3: 12px;
|
||
--space-4: 16px;
|
||
--space-5: 20px;
|
||
--space-6: 24px;
|
||
--space-7: 28px;
|
||
--space-8: 32px;
|
||
|
||
/* Radius and shadow */
|
||
--radius-2: 10px;
|
||
--radius-3: 16px;
|
||
--shadow-1: 0 6px 18px rgba(0,0,0,0.06);
|
||
--shadow-2: 0 10px 28px rgba(0,0,0,0.10);
|
||
}
|
||
|
||
/* Utility classes */
|
||
.stack{ display:flex; flex-direction:column; }
|
||
.row{ display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap; }
|
||
.center{ display:grid; place-items:center; }
|
||
.mt-0{ margin-top:var(--space-0);}
|
||
.mt-1{ margin-top:var(--space-1);}
|
||
.mt-2{ margin-top:var(--space-2);}
|
||
.mt-3{ margin-top:var(--space-3);}
|
||
.mt-4{ margin-top:var(--space-4);}
|
||
.mt-5{ margin-top:var(--space-5);}
|
||
.mt-6{ margin-top:var(--space-6);}
|
||
.mt-7{ margin-top:var(--space-7);}
|
||
.mt-8{ margin-top:var(--space-8);}
|
||
.mb-0{ margin-bottom:var(--space-0);}
|
||
.mb-1{ margin-bottom:var(--space-1);}
|
||
.mb-2{ margin-bottom:var(--space-2);}
|
||
.mb-3{ margin-bottom:var(--space-3);}
|
||
.mb-4{ margin-bottom:var(--space-4);}
|
||
.mb-5{ margin-bottom:var(--space-5);}
|
||
.mb-6{ margin-bottom:var(--space-6);}
|
||
.mb-7{ margin-bottom:var(--space-7);}
|
||
.mb-8{ margin-bottom:var(--space-8);}
|
||
.p-0{ padding:var(--space-0);}
|
||
.p-2{ padding:var(--space-2);}
|
||
.p-3{ padding:var(--space-3);}
|
||
.p-4{ padding:var(--space-4);}
|
||
.p-5{ padding:var(--space-5);}
|
||
.px-4{ padding-left:var(--space-4); padding-right:var(--space-4);}
|
||
.py-4{ padding-top:var(--space-4); padding-bottom:var(--space-4);}
|
||
.chip{ display:inline-block; padding:4px 10px; border-radius:999px; background:var(--brand-green-50); color:var(--brand-green); font-weight:600; font-size:var(--fs-xs); }
|
||
|
||
/* App shell */
|
||
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-sans); }
|
||
.deck{ width:100%; max-width:560px; margin:0 auto; padding: min(4vw, 18px); }
|
||
|
||
/* Slide card – 9:16 portrait */
|
||
.slide{
|
||
background:var(--surface);
|
||
border-radius:var(--radius-3);
|
||
box-shadow:var(--shadow-1);
|
||
overflow:hidden;
|
||
margin: clamp(14px, 2.6vw, 22px) auto;
|
||
width:100%;
|
||
aspect-ratio:9/16;
|
||
display:flex;
|
||
flex-direction:column;
|
||
}
|
||
|
||
.slide-header{
|
||
background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-700) 100%);
|
||
color:#fff;
|
||
padding: clamp(12px, 2.6vw, 18px) clamp(14px, 3vw, 20px);
|
||
}
|
||
.slide-title{
|
||
font-size: var(--fs-xl);
|
||
line-height:1.2;
|
||
font-weight:800;
|
||
letter-spacing:-0.2px;
|
||
}
|
||
.slide-sub{ font-size: var(--fs-sm); opacity:0.95; margin-top:6px; }
|
||
|
||
.slide-body{
|
||
padding: clamp(14px, 3.2vw, 22px);
|
||
display:flex;
|
||
flex-direction:column;
|
||
gap:12px;
|
||
overflow:auto;
|
||
}
|
||
|
||
/* Content blocks */
|
||
.card{
|
||
border:1px solid var(--line);
|
||
border-radius:var(--radius-2);
|
||
background:#fff;
|
||
padding:12px 14px;
|
||
}
|
||
.accent{
|
||
border-left:6px solid var(--brand-green);
|
||
padding-left:12px;
|
||
}
|
||
.note{ font-size:var(--fs-xs); color:var(--ink-3); }
|
||
.mono{ font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }
|
||
|
||
/* Text scaling inside content */
|
||
.t-lg{ font-size: var(--fs-lg); line-height:1.5; }
|
||
.t-md{ font-size: var(--fs-md); line-height:1.6; }
|
||
.t-sm{ font-size: var(--fs-sm); line-height:1.6; }
|
||
|
||
/* Responsive tweaks */
|
||
@media (min-width: 900px){
|
||
.deck{ max-width:880px; }
|
||
.slide{ max-width:420px; }
|
||
.deck.grid{
|
||
display:grid;
|
||
grid-template-columns: repeat(2, minmax(300px, 1fr));
|
||
gap:24px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="deck grid">
|
||
|
||
<!-- Slide 1 -->
|
||
<section class="slide">
|
||
<header class="slide-header">
|
||
<div class="slide-title">위자료 상해 급수별로 정액을 지급함 ( 염좌는 15만원 )</div>
|
||
<div class="slide-sub">정책/보상 개요</div>
|
||
</header>
|
||
<div class="slide-body">
|
||
<div class="card accent t-md">
|
||
휴업손해<br>
|
||
소득 신고 및 입증 되는 소득의 85%를 입원기간 동안 인정<br>
|
||
( 15% 공제 이유는? 경제활동 과정에서의 비용을 차감 ) 3,144,413원
|
||
</div>
|
||
<div class="card t-md">
|
||
실제 치료비 말 그대로의 실제로 발생한 치료비, 요건 병원에다가<br>
|
||
보험사에서 납부 해주겠죠?
|
||
</div>
|
||
<div class="card t-md">
|
||
향후 치료비<br>
|
||
Point, 합의라는 과정은 상호간의 협의.<br>
|
||
지금까지 100만원 어치 치료받아서 차도가 있으니, 향후에<br>
|
||
받을 치료비를 예를들어 50만원 지급하기로 하고 합의하는 항목<br>
|
||
(약관상에 항목에는 없음, 단 합의를 위한 조정 항목)
|
||
</div>
|
||
<div class="card t-md">
|
||
기타 손해배상금 통원시에 교통비, 1회 통원시마다 8천원의 교통비 지급.<br>
|
||
입원은 해당 안됨, 만일 하루에 병원을 2곳가면 1만6천원
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 2 -->
|
||
<section class="slide">
|
||
<header class="slide-header">
|
||
<div class="slide-title">염좌 12급 / 6일입원 / 2일 통원 / 무과실 / 주부 / 120만</div>
|
||
<div class="slide-sub">원</div>
|
||
</header>
|
||
<div class="slide-body">
|
||
<div class="row">
|
||
<span class="chip">위자료</span>
|
||
<span class="chip">휴업손해</span>
|
||
<span class="chip">기타손배금</span>
|
||
<span class="chip">향후치료비</span>
|
||
</div>
|
||
<div class="card mono t-md">
|
||
12급 : 150,000원
|
||
</div>
|
||
<div class="card mono t-md">
|
||
3,144,413 / 30일 * 85% * 6일 = 534,546원
|
||
</div>
|
||
<div class="card mono t-md">
|
||
8,000 * 2일 = 16,000원
|
||
</div>
|
||
<div class="card mono t-lg" style="border-color:var(--brand-orange)">
|
||
499,454원
|
||
</div>
|
||
<p class="note">계산 수치는 원문 값 그대로 표기</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 3 -->
|
||
<section class="slide">
|
||
<header class="slide-header">
|
||
<div class="slide-title">활동 이슈 - 신담보 출시</div>
|
||
<div class="slide-sub">상품 라인업</div>
|
||
</header>
|
||
<div class="slide-body">
|
||
<div class="card t-lg">
|
||
하이클래스 암주요치료비 2종<br>
|
||
암주요치료비(상급종합병원플러스)
|
||
</div>
|
||
<div class="card t-sm">
|
||
모바일 포맷에 최적화된 요약 카드로 구성
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 4 -->
|
||
<section class="slide">
|
||
<header class="slide-header">
|
||
<div class="slide-title">지표 데이터</div>
|
||
<div class="slide-sub">원문 수치 보전</div>
|
||
</header>
|
||
<div class="slide-body">
|
||
<div class="card mono t-md">
|
||
16.3 31.5 37.1 12.8 24.9 28.2<br>
|
||
24.1 40.6 45.3 20.2 31.4 33.3<br>
|
||
12.7 28.3 32.8 9.5 23.7 26.7<br>
|
||
9.9 17.5 22.8 2.8 8.0 11.9<br>
|
||
24.3 35.8 43.6 11.7 22.0 28.6<br>
|
||
24.4 47.9 57.8 13.7 31.8 40.4<br>
|
||
23.3 30.1 34.6 11.2 17.2 20.2<br>
|
||
33.6 31.8 34.7 7.0 8.7 11.7
|
||
</div>
|
||
<p class="note">그래프 대신 수치 그대로를 가독성 있게 배치</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 5 -->
|
||
<section class="slide">
|
||
<header class="slide-header">
|
||
<div class="slide-title">암은 우연히 생기는 질병</div>
|
||
<div class="slide-sub">이다?</div>
|
||
</header>
|
||
<div class="slide-body">
|
||
<div class="card t-md">
|
||
자료 : 존스홉킨스대 사이언스 논문
|
||
</div>
|
||
<div class="card t-md">
|
||
암은 재수없는 사람이 걸린다? 암은 누가 걸릴지 모른다는 것이 모범답안
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 6 -->
|
||
<section class="slide">
|
||
<header class="slide-header">
|
||
<div class="slide-title">‘01-’05 ‘06-’10 ‘11-’15 ‘16-’20 ‘18-’22</div>
|
||
<div class="slide-sub">구간별 동향</div>
|
||
</header>
|
||
<div class="slide-body">
|
||
<div class="card t-md">
|
||
전체 남자(폐암/위암) 여자(유방암/대장암)<br>
|
||
(단위 : %)
|
||
</div>
|
||
<div class="card mono t-md">
|
||
54.2%(01-05) 65.5%(06-10)70.8%(11-15)72.9%(18-22)
|
||
</div>
|
||
<div class="card t-md">
|
||
2025년 1월 2일 22년 국가암등록통계 발표
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 7 -->
|
||
<section class="slide">
|
||
<header class="slide-header">
|
||
<div class="slide-title">암종 목록</div>
|
||
<div class="slide-sub">첫번째 세트</div>
|
||
</header>
|
||
<div class="slide-body">
|
||
<div class="card t-md">
|
||
갑상선암<br>
|
||
폐암<br>
|
||
대장암<br>
|
||
위암<br>
|
||
유방암<br>
|
||
전립선암<br>
|
||
간암<br>
|
||
췌장암<br>
|
||
담낭 및 기타담도 암<br>
|
||
신장암
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 8 -->
|
||
<section class="slide">
|
||
<header class="slide-header">
|
||
<div class="slide-title">암종 목록</div>
|
||
<div class="slide-sub">두번째 세트</div>
|
||
</header>
|
||
<div class="slide-body">
|
||
<div class="card t-md">
|
||
갑상선암<br>
|
||
대장암<br>
|
||
폐암<br>
|
||
위암<br>
|
||
유방암<br>
|
||
전립선암<br>
|
||
간암<br>
|
||
췌장암<br>
|
||
담낭 및 기타담도 암<br>
|
||
신장암
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 9 -->
|
||
<section class="slide">
|
||
<header class="slide-header">
|
||
<div class="slide-title">암종/순위 주석</div>
|
||
<div class="slide-sub">메모</div>
|
||
</header>
|
||
<div class="slide-body">
|
||
<div class="card t-md">
|
||
갑상선암(여성2위)<br>
|
||
대장암(남/여성3<br>
|
||
위)<br>
|
||
폐암(남성1위/여성4<br>
|
||
위)<br>
|
||
유방암(여성1위)<br>
|
||
위암<br>
|
||
전립선암(남성2위)<br>
|
||
간암(남성5위)<br>
|
||
췌장암<br>
|
||
신장암<br>
|
||
담낭 및 기타담도 암
|
||
</div>
|
||
<div class="card t-md">
|
||
남성 比 여성3배 ↑<br>
|
||
사망률 1위 / 감각신경 X<br>
|
||
뒤끝 있는 암 / 10년 후 재발 25% / 5위->4위<br>
|
||
서양형 암 → 한국형 암<br>
|
||
21년 남성 4위
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 10 -->
|
||
<section class="slide">
|
||
<header class="slide-header">
|
||
<div class="slide-title">구 분 마스토체크</div>
|
||
<div class="slide-sub">검사 정보</div>
|
||
</header>
|
||
<div class="slide-body">
|
||
<div class="card t-md">
|
||
대 상 전연령<br>
|
||
정확도 특허기준 92%<br>
|
||
1ml의 혈액채혈로 검사 가능<br>
|
||
치밀유방의 경우 높은 정확도<br>
|
||
특 징<br>
|
||
비 용 8~10만원
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 11 -->
|
||
<section class="slide">
|
||
<header class="slide-header">
|
||
<div class="slide-title">PSA 수치 전립선암 진단 확률</div>
|
||
<div class="slide-sub">수치표</div>
|
||
</header>
|
||
<div class="slide-body">
|
||
<div class="card mono t-md">
|
||
0~4 12.4~16.0<br>
|
||
4~10 15.9~19.6<br>
|
||
10~20 33.0~34.1<br>
|
||
20~100 76.0~77.6
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 12 -->
|
||
<section class="slide">
|
||
<header class="slide-header">
|
||
<div class="slide-title">과거</div>
|
||
<div class="slide-sub">현재</div>
|
||
</header>
|
||
<div class="slide-body">
|
||
<div class="row">
|
||
<div class="card t-lg" style="flex:1">
|
||
암<br>
|
||
뇌/심
|
||
</div>
|
||
<div class="card t-lg" style="flex:1">
|
||
암<br>
|
||
뇌/심
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 13 -->
|
||
<section class="slide">
|
||
<header class="slide-header">
|
||
<div class="slide-title">건강보험 통계분석해보니. 서울 원정 암 환자, 더 늘었다</div>
|
||
<div class="slide-sub">이데일리 24.12.3</div>
|
||
</header>
|
||
<div class="slide-body">
|
||
<div class="card t-md">
|
||
국립암센터(고양<br>
|
||
시) 원자력병원(서울/노원구)
|
||
</div>
|
||
<div class="card t-sm">
|
||
원문 문구와 줄바꿈을 유지하여 모바일 가독성 강화
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
</body>
|
||
</html> |