/* =========================================================================
HTML 포트폴리오 디자인 시스템 (html-portfolio-writer)
- A4 세로 / 동적 로딩 / 네이비+블루 / 인포그래픽
- 이 파일 전체를 생성물 <문서폴더>/html/styles.css 로 복사하고,
index.html 에서 로 연결한다.
- 범용 A4 디자인 시스템(표지/목차/블록/카드/KPI/표/타임라인/플로우/스택칩/
placeholder) + 포트폴리오 전용(태그핀·데모버튼·성과강조)을 포함한다.
========================================================================= */
:root{
--navy: #0f2350; /* 헤더·표지 진한 배경 */
--navy-2: #1b3a6b; /* 보조 네이비 */
--blue: #2563eb; /* 주 포인트(accent) */
--blue-d: #1d4ed8;
--blue-l: #dbeafe; /* 연한 블루 면 */
--blue-xl:#eff4ff; /* 아주 연한 블루 배경 */
--ink: #1f2937; /* 본문 글자 */
--ink-2: #374151;
--muted: #6b7280; /* 보조 글자 */
--line: #e5e7eb; /* 구분선 */
--line-2: #d1d5db;
--bg: #e9edf2; /* 페이지 바깥 여백(화면 전용) */
--ok: #16a34a;
--warn: #d97706;
--page-pad: 16mm;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
body{
font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',
'Malgun Gothic','맑은 고딕',sans-serif;
background:var(--bg);
color:var(--ink);
line-height:1.55;
font-size:13pt;
letter-spacing:-0.01em;
}
/* ===== A4 페이지 ===== */
@page{ size:A4; margin:0; }
.page{
position:relative;
width:210mm;
min-height:297mm;
margin:8mm auto;
padding:var(--page-pad);
background:#fff;
box-shadow:0 2px 14px rgba(15,35,80,.14);
overflow:hidden;
display:flex;
flex-direction:column;
}
.page > .page-body{ flex:1 1 auto; }
@media print{
body{ background:#fff; }
.page{ margin:0; box-shadow:none; page-break-after:always; }
.page:last-child{ page-break-after:auto; }
}
/* ===== 러닝 헤더/푸터 ===== */
.rhead{
display:flex; justify-content:space-between; align-items:center;
padding-bottom:6px; margin-bottom:14px;
border-bottom:2px solid var(--navy);
font-size:11pt; color:var(--muted);
}
.rhead .proj{ font-weight:600; color:var(--navy-2); }
.rfoot{
display:flex; justify-content:space-between; align-items:center;
margin-top:auto; padding-top:8px; border-top:1px solid var(--line);
font-size:10.5pt; color:var(--muted);
}
.rfoot .pno{ font-weight:700; color:var(--blue); }
/* ===== 섹션 타이틀 ===== */
.sec-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.sec-head .num{
flex:none; width:34px; height:34px; border-radius:9px;
background:var(--navy); color:#fff; font-weight:800; font-size:16pt;
display:flex; align-items:center; justify-content:center;
}
.sec-head h2{ font-size:19pt; font-weight:800; color:var(--navy); letter-spacing:-.02em; }
.sec-head .en{ font-size:10.5pt; color:var(--blue); font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.lead{
background:var(--blue-xl); border-left:4px solid var(--blue);
padding:10px 14px; border-radius:0 8px 8px 0; margin-bottom:16px;
font-size:12.5pt; color:var(--ink-2);
}
/* ===== ■ 블록 + 개조식 ===== */
.block{ margin-bottom:12px; }
.block > h3{
font-size:13.5pt; font-weight:700; color:var(--navy-2); margin-bottom:7px;
display:flex; align-items:center; gap:7px;
}
.block > h3::before{ content:""; width:9px; height:9px; background:var(--blue); border-radius:2px; flex:none; }
ul.bul{ list-style:none; padding-left:2px; }
ul.bul > li{
position:relative; padding-left:15px; margin-bottom:4px; color:var(--ink-2);
}
ul.bul > li::before{
content:""; position:absolute; left:2px; top:8px;
width:5px; height:5px; border-radius:50%; background:var(--blue);
}
ul.bul > li b, ul.bul > li strong{ color:var(--navy-2); font-weight:700; }
/* ===== 카드 그리드 (아이콘 카드) ===== */
.grid{ display:grid; gap:10px; }
.grid.c2{ grid-template-columns:repeat(2,1fr); }
.grid.c3{ grid-template-columns:repeat(3,1fr); }
.grid.c4{ grid-template-columns:repeat(4,1fr); }
.card{
border:1px solid var(--line); border-radius:10px; padding:12px;
background:#fff; display:flex; flex-direction:column; gap:6px;
}
.card .ico{
width:32px; height:32px; border-radius:8px; background:var(--blue-l);
display:flex; align-items:center; justify-content:center; color:var(--blue-d);
}
.card .ico svg{ width:18px; height:18px; }
.card h4{ font-size:13pt; font-weight:700; color:var(--navy); }
.card p{ font-size:11.5pt; color:var(--muted); line-height:1.5; }
.card.accent{ background:var(--blue-xl); border-color:var(--blue-l); }
/* ===== KPI / 통계 ===== */
.kpi-row{ display:flex; gap:10px; }
.kpi{
flex:1; text-align:center; padding:14px 8px; border-radius:10px;
background:var(--navy); color:#fff;
}
.kpi.alt{ background:var(--blue); }
.kpi.ghost{ background:var(--blue-xl); color:var(--navy); border:1px solid var(--blue-l); }
.kpi .v{ font-size:23pt; font-weight:800; line-height:1.1; }
.kpi .l{ font-size:11pt; opacity:.85; margin-top:3px; }
/* ===== 표 ===== */
table.tbl{ width:100%; border-collapse:collapse; font-size:12pt; }
table.tbl th{
background:var(--navy); color:#fff; font-weight:700; text-align:left;
padding:8px 10px;
}
table.tbl td{ padding:7px 10px; border-bottom:1px solid var(--line); color:var(--ink-2); }
table.tbl tr:nth-child(even) td{ background:var(--blue-xl); }
table.tbl tr.total td{ background:var(--navy-2); color:#fff; font-weight:800; }
table.tbl td.num, table.tbl th.num{ text-align:right; font-variant-numeric:tabular-nums; }
/* ===== 타임라인(개발 일정 — 세로) ===== */
.timeline{ position:relative; padding-left:26px; }
.timeline::before{
content:""; position:absolute; left:9px; top:4px; bottom:4px; width:2px; background:var(--blue-l);
}
.tl-item{ position:relative; margin-bottom:12px; }
.tl-item::before{
content:""; position:absolute; left:-21px; top:3px; width:14px; height:14px;
border-radius:50%; background:#fff; border:3px solid var(--blue);
}
.tl-item .ph{ font-weight:700; color:var(--navy); font-size:13pt; }
.tl-item .ph span{ color:var(--blue); font-weight:800; margin-right:6px; }
.tl-item .out{ font-size:11pt; color:var(--muted); margin-top:2px; }
/* ===== 간트(막대 일정) ===== */
.gantt{ display:grid; grid-template-columns:130px 1fr; gap:6px 8px; align-items:center; font-size:11.5pt; }
.gantt .gh{ font-weight:700; color:var(--muted); font-size:10.5pt; text-align:center; }
.gantt .glabel{ color:var(--ink-2); font-weight:600; }
.gantt .gtrack{ position:relative; height:18px; background:var(--blue-xl); border-radius:5px; }
.gantt .gbar{ position:absolute; top:2px; bottom:2px; background:var(--blue); border-radius:4px;
display:flex; align-items:center; padding-left:7px; color:#fff; font-size:10pt; font-weight:600; }
/* ===== 아키텍처/플로우 다이어그램 ===== */
.flow{ display:flex; align-items:stretch; gap:0; }
.flow .node{
flex:1; background:var(--blue-xl); border:1.5px solid var(--blue-l); border-radius:10px;
padding:12px 8px; text-align:center;
}
.flow .node .t{ font-weight:700; color:var(--navy); font-size:12.5pt; }
.flow .node .d{ font-size:10.5pt; color:var(--muted); margin-top:3px; }
.flow .node.hl{ background:var(--navy); border-color:var(--navy); }
.flow .node.hl .t{ color:#fff; } .flow .node.hl .d{ color:#cdd8ee; }
.flow .arrow{ flex:none; width:34px; display:flex; align-items:center; justify-content:center; color:var(--blue); font-size:18pt; }
.layer{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px; }
.layer .lt{ font-size:10.5pt; font-weight:700; color:var(--blue); letter-spacing:.04em; margin-bottom:6px; text-transform:uppercase; }
.layer .chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ background:var(--blue-l); color:var(--navy-2); border-radius:6px; padding:4px 9px; font-size:11pt; font-weight:600; }
.chip.solid{ background:var(--navy); color:#fff; }
/* ===== 이미지 placeholder (점선 + 아이콘 + alt 캡션) ===== */
.ph-img{
border:2px dashed var(--line-2); border-radius:10px; background:#fafbfc;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:6px; text-align:center; padding:16px; color:var(--muted); min-height:120px;
}
.ph-img svg{ width:30px; height:30px; opacity:.55; }
.ph-img .cap{ font-size:11pt; line-height:1.4; max-width:90%; }
.ph-img .tag{ font-size:10pt; font-weight:700; color:var(--blue); letter-spacing:.08em; text-transform:uppercase; }
/* ===== 실제 화면 스크린샷 (단일 컬럼, 크게) ===== */
.shot{ margin:0; border:1px solid var(--line-2); border-radius:11px; overflow:hidden;
background:#fff; box-shadow:0 3px 14px rgba(15,35,80,.10); }
.shot img{ display:block; width:100%; height:auto; }
.shot figcaption{ font-size:10.5pt; color:var(--muted); line-height:1.45;
padding:9px 13px; border-top:1px solid var(--line); background:var(--blue-xl); }
.shot figcaption b{ color:var(--navy); font-weight:700; }
.shot.bare{ box-shadow:0 3px 14px rgba(15,35,80,.10); }
/* ===== 노트(※/⚠) ===== */
.note{ font-size:11pt; color:var(--muted); margin-top:8px; padding-left:4px; }
.note.warn{ color:var(--warn); }
.callout{
background:#fff7ed; border:1px solid #fed7aa; border-left:4px solid var(--warn);
border-radius:0 8px 8px 0; padding:9px 12px; font-size:11.5pt; color:#92400e;
}
/* ===== 표지 ===== */
.cover{ background:linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 60%,var(--blue-d) 130%); color:#fff; padding:0; }
.cover .cv-inner{ padding:30mm var(--page-pad); display:flex; flex-direction:column; height:100%; min-height:calc(297mm - 0px); }
.cover .cv-badge{ display:inline-block; align-self:flex-start; border:1px solid rgba(255,255,255,.5);
border-radius:30px; padding:5px 16px; font-size:11.5pt; letter-spacing:.05em; margin-bottom:auto; }
.cover .cv-kicker{ color:#9db8ee; font-size:13.5pt; font-weight:600; margin-bottom:10px; }
.cover h1{ font-size:30pt; font-weight:800; line-height:1.25; letter-spacing:-.02em; }
.cover h1 .em{ color:#7eb0ff; }
.cover .cv-sub{ margin-top:14px; font-size:13.5pt; color:#cdd8ee; }
.cover .cv-meta{ margin-top:30px; display:grid; grid-template-columns:repeat(2,auto); gap:8px 40px; justify-content:start;
border-top:1px solid rgba(255,255,255,.25); padding-top:18px; font-size:12.5pt; }
.cover .cv-meta .k{ color:#9db8ee; margin-right:10px; }
/* ===== 목차 ===== */
.toc-list{ list-style:none; }
.toc-list li{ display:flex; align-items:baseline; padding:11px 4px; border-bottom:1px solid var(--line); }
.toc-list .tn{ flex:none; width:30px; height:30px; border-radius:7px; background:var(--blue-xl); color:var(--blue-d);
font-weight:800; display:flex; align-items:center; justify-content:center; margin-right:12px; font-size:13.5pt; }
.toc-list .tt{ font-weight:600; color:var(--navy-2); font-size:13.5pt; }
.toc-list .dots{ flex:1; border-bottom:1px dotted var(--line-2); margin:0 8px; transform:translateY(-3px); }
.toc-list .tp{ font-weight:700; color:var(--blue); font-size:12.5pt; }
/* 유틸 */
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
/* =========================================================================
포트폴리오 전용 컴포넌트 (html-portfolio-writer 추가분)
========================================================================= */
/* ===== 스프라이트 라인 아이콘 렌더링 (fill 없는 패스를 선으로 그림) =====
쉘의 들은 fill/stroke 속성이 없으므로,