thug0bin/animal-medication-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 템플릿 가독성 개선 - 폰트/패딩 확대, truncation 제거

Browse Source
This commit is contained in:
청춘약국
2026-03-18 23:24:49 +09:00
parent 4fb34d5e17
commit 28bb87d631
1 changed files with 53 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
templates/medication_guide_v2.html
View File

@@ -19,10 +19,9 @@
/* 페이지 */ /* 페이지 */
.page { .page {
width: 210mm; width: 210mm;
height: 297mm; min-height: 297mm;
padding: 5mm; padding: 5mm;
page-break-after: always; page-break-after: always;
position: relative;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -63,17 +62,12 @@
color: #666; color: #666;
} }
/* 카드 그리드 영역 - 고정 높이 */ /* 카드 그리드 영역 */
.cards-area { .cards-area {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr; grid-template-rows: auto auto;
gap: 2mm; gap: 3mm;
height: 265mm; /* 297 - 5*2(패딩) - 15(헤더) - 7(푸터) */
}
.cards-area.no-header {
height: 280mm; /* 헤더 없을 때 */
} }
/* 약품 카드 */ /* 약품 카드 */
@@ -81,8 +75,7 @@
border: 1px solid #E0E0E0; border: 1px solid #E0E0E0;
border-radius: 2mm; border-radius: 2mm;
overflow: hidden; overflow: hidden;
display: flex; page-break-inside: avoid;
flex-direction: column;
} }
.drug-card-header { .drug-card-header {
@@ -130,36 +123,34 @@
} }
.drug-card-body { .drug-card-body {
padding: 1.5mm; padding: 3mm;
font-size: 5.5pt; font-size: 7pt;
flex: 1;
overflow: hidden;
} }
/* 섹션들 */ /* 섹션들 */
.coverage-title { .coverage-title {
font-size: 6pt; font-size: 8pt;
font-weight: 700; font-weight: 700;
color: #1565C0; color: #1565C0;
margin-bottom: 1mm; margin-bottom: 2mm;
} }
.coverage-table { .coverage-table {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 0.5mm; gap: 1mm;
background: #F5F5F5; background: #F5F5F5;
padding: 1mm; padding: 2mm;
border-radius: 1mm; border-radius: 1.5mm;
margin-bottom: 1.5mm; margin-bottom: 3mm;
} }
.coverage-item { .coverage-item {
background: white; background: white;
padding: 1mm; padding: 1.5mm;
border-radius: 0.5mm; border-radius: 1mm;
text-align: center; text-align: center;
font-size: 5pt; font-size: 6pt;
} }
.coverage-item.covered { border-left: 1.5px solid #4CAF50; } .coverage-item.covered { border-left: 1.5px solid #4CAF50; }
@@ -172,26 +163,26 @@
.gap-warning { .gap-warning {
background: #FFF3E0; background: #FFF3E0;
border: 1px solid #FFB74D; border: 1px solid #FFB74D;
border-radius: 1mm; border-radius: 1.5mm;
padding: 1mm; padding: 2mm;
margin-bottom: 1.5mm; margin-bottom: 3mm;
font-size: 5pt; font-size: 6pt;
} }
.gap-warning-title { font-weight: 700; color: #E65100; } .gap-warning-title { font-weight: 700; color: #E65100; font-size: 7pt; }
.gap-solution { color: #F57C00; } .gap-solution { color: #F57C00; }
/* 투약 정보 */ /* 투약 정보 */
.dosing-section { .dosing-section {
background: #E3F2FD; background: #E3F2FD;
border-radius: 1mm; border-radius: 1.5mm;
padding: 1mm 1.5mm; padding: 2mm 3mm;
margin-bottom: 1.5mm; margin-bottom: 3mm;
} }
.dosing-title { font-weight: 700; color: #1565C0; font-size: 5.5pt; } .dosing-title { font-weight: 700; color: #1565C0; font-size: 7pt; }
.dosing-main { font-size: 8pt; font-weight: 700; color: #0D47A1; } .dosing-main { font-size: 11pt; font-weight: 700; color: #0D47A1; }
.dosing-note { font-size: 5pt; color: #1976D2; } .dosing-note { font-size: 6pt; color: #1976D2; margin-top: 1mm; }
/* 체중별 제품 */ /* 체중별 제품 */
.weight-products { .weight-products {
@@ -213,60 +204,60 @@
.dosage-grid { .dosage-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 0.5mm; gap: 1mm;
background: #E3F2FD; background: #E3F2FD;
padding: 1mm; padding: 2mm;
border-radius: 1mm; border-radius: 1.5mm;
margin-bottom: 1.5mm; margin-bottom: 3mm;
} }
.dosage-cell { .dosage-cell {
background: white; background: white;
padding: 1mm; padding: 1.5mm;
border-radius: 0.5mm; border-radius: 1mm;
text-align: center; text-align: center;
font-size: 5pt; font-size: 6pt;
} }
.dosage-weight { font-weight: 500; color: #1565C0; } .dosage-weight { font-weight: 500; color: #1565C0; font-size: 7pt; }
.dosage-amount { font-weight: 700; color: #0D47A1; font-size: 6pt; } .dosage-amount { font-weight: 700; color: #0D47A1; font-size: 9pt; }
/* 절대 금기 */ /* 절대 금기 */
.contraindication-box { .contraindication-box {
background: #FFEBEE; background: #FFEBEE;
border: 1px solid #F44336; border: 1.5px solid #F44336;
border-radius: 1mm; border-radius: 1.5mm;
padding: 1mm; padding: 2mm;
margin-bottom: 1.5mm; margin-bottom: 3mm;
} }
.contraindication-title { font-weight: 900; color: #C62828; font-size: 6pt; } .contraindication-title { font-weight: 900; color: #C62828; font-size: 8pt; margin-bottom: 1mm; }
.contraindication-list { .contraindication-list {
list-style: none; list-style: none;
font-size: 5pt; font-size: 6pt;
color: #B71C1C; color: #B71C1C;
} }
.contraindication-list li { padding: 0.3mm 0; } .contraindication-list li { padding: 0.5mm 0; }
/* 주의사항 */ /* 주의사항 */
.warnings-section { .warnings-section {
background: #FFF8E1; background: #FFF8E1;
border: 1px solid #FFE082; border: 1px solid #FFE082;
border-radius: 1mm; border-radius: 1.5mm;
padding: 1mm; padding: 2mm;
} }
.warnings-title { font-weight: 700; color: #F57F17; font-size: 5.5pt; } .warnings-title { font-weight: 700; color: #F57F17; font-size: 7pt; margin-bottom: 1mm; }
.warnings-list { .warnings-list {
list-style: none; list-style: none;
font-size: 5pt; font-size: 6pt;
color: #795548; color: #795548;
} }
.warnings-list li { padding: 0.2mm 0; } .warnings-list li { padding: 0.3mm 0; }
/* 외용제 용법 */ /* 외용제 용법 */
.usage-box { .usage-box {
@@ -314,7 +305,7 @@
</div> </div>
{% endif %} {% endif %}
<div class="cards-area {% if page_num > 0 %}no-header{% endif %}"> <div class="cards-area">
{% set start_idx = page_num * drugs_per_page %} {% set start_idx = page_num * drugs_per_page %}
{% set end_idx = [start_idx + drugs_per_page, drugs|length] | min %} {% set end_idx = [start_idx + drugs_per_page, drugs|length] | min %}
@@ -384,8 +375,8 @@
<div class="contraindication-box"> <div class="contraindication-box">
<div class="contraindication-title">🚫 절대 금기</div> <div class="contraindication-title">🚫 절대 금기</div>
<ul class="contraindication-list"> <ul class="contraindication-list">
{% for c in drug.absolute_contraindications[:3] %} {% for c in drug.absolute_contraindications %}
<li>❌ {{ c.item }}</li> <li>❌ {{ c.item }} — {{ c.reason }}</li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
@@ -433,9 +424,9 @@
<!-- 주의사항 --> <!-- 주의사항 -->
{% if drug.warnings %} {% if drug.warnings %}
<div class="warnings-section"> <div class="warnings-section">
<div class="warnings-title">⚠️ 주의</div> <div class="warnings-title">⚠️ 주의사항</div>
<ul class="warnings-list"> <ul class="warnings-list">
{% for w in drug.warnings[:3] %}<li>{{ w[:40] }}{% if w|length > 40 %}...{% endif %}</li>{% endfor %} {% for w in drug.warnings %}<li>{{ w }}</li>{% endfor %}
</ul> </ul>
</div> </div>
{% endif %} {% endif %}