auto: 일일 백업 2026-09-09 02:00
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,181 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>세부 여행 결산</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+KR:wght@400;500;600&display=swap">
|
||||
<link rel="stylesheet" href="../assets/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
|
||||
<a class="back" href="../"><span>←</span> 여행 결산 목록</a>
|
||||
|
||||
<header class="masthead">
|
||||
<div class="eyebrow">Cebu, Philippines · 2026</div>
|
||||
<h1>세부 여행 결산</h1>
|
||||
<p class="sub">항공권 예약 2026-07-23부터 정산 완료 2026-09-07까지, 지출 13건과 정산 수입 2건의 전체 기록</p>
|
||||
<dl class="meta">
|
||||
<div><dt>여행 기간</dt><dd class="num">09/02 – 09/06</dd></div>
|
||||
<div><dt>일정</dt><dd>4박 5일</dd></div>
|
||||
<div><dt>항공 좌석</dt><dd class="num">8석</dd></div>
|
||||
<div><dt>숙소</dt><dd>샹그릴라</dd></div>
|
||||
<div><dt>적용 환율</dt><dd class="num">₩1,395.35<small>/USD</small></dd></div>
|
||||
</dl>
|
||||
</header>
|
||||
|
||||
<div class="figures">
|
||||
<div class="fig">
|
||||
<div class="lab">총 지출 <span class="num">(실사용 기준)</span></div>
|
||||
<div class="val num">9,585,757원</div>
|
||||
<div class="note">쓰지 않은 달러 2,581,395원을 뺀 금액</div>
|
||||
</div>
|
||||
<div class="fig">
|
||||
<div class="lab">정산 수입</div>
|
||||
<div class="val num sign">−3,879,993원</div>
|
||||
<div class="note">장인어른 지원금 · 처제 호핑 분담</div>
|
||||
</div>
|
||||
<div class="fig lead">
|
||||
<div class="lab">우리 순부담</div>
|
||||
<div class="val num">5,705,764원</div>
|
||||
<div class="note">총 지출에서 정산 수입을 뺀 실제 부담액</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<h2>달러 정산</h2>
|
||||
<p class="lede">현지 경비로 2,150달러를 환전해 300달러만 썼습니다. 남은 1,850달러는 아직 쓰지 않은 돈이라 여행 지출에서 뺐습니다.</p>
|
||||
<div class="fx">
|
||||
<div>
|
||||
<div class="k">환전</div>
|
||||
<div class="usd num">$2,150</div>
|
||||
<div class="krw num">3,000,000원</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="k">현지 사용</div>
|
||||
<div class="usd num">$300</div>
|
||||
<div class="krw num">418,605원</div>
|
||||
</div>
|
||||
<div class="rest">
|
||||
<div class="k">잔여</div>
|
||||
<div class="usd num">$1,850</div>
|
||||
<div class="krw num">2,581,395원</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="fxnote">가계부(후잉)에는 환전한 3,000,000원 전액이 08/26 지출로 기록돼 있습니다. 남은 달러는 자산으로 잡지 않기로 해서, 이 결산에서만 실사용분으로 조정했습니다.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>지출 구성</h2>
|
||||
<p class="lede">실사용 기준 9,585,757원의 내역입니다. 항공과 숙박이 68%로 대부분을 차지하고, 현지에서 실제로 쓴 돈은 293만원입니다.</p>
|
||||
<div class="bar" role="img" aria-label="지출 구성: 항공 38.7%, 현지 경비 30.6%, 숙박 29.4%, 공항·기타 1.3%">
|
||||
<span style="width:38.66%;background:var(--seg-air);"></span>
|
||||
<span style="width:30.62%;background:var(--seg-local);"></span>
|
||||
<span style="width:29.38%;background:var(--seg-stay);"></span>
|
||||
<span style="width:1.34%;background:var(--seg-etc);"></span>
|
||||
</div>
|
||||
<ul class="legend">
|
||||
<li>
|
||||
<span class="sw" style="background:var(--seg-air);"></span>
|
||||
<span class="nm">항공<em>대한항공 항공권 · 좌석 8석 선점</em></span>
|
||||
<span class="pc num">38.7%</span>
|
||||
<span class="amt num">3,706,000</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="sw" style="background:var(--seg-local);"></span>
|
||||
<span class="nm">현지 경비<em>하나머니 해외결제 1,636,081 · 클럽호핑 879,993 · 달러 418,605</em></span>
|
||||
<span class="pc num">30.6%</span>
|
||||
<span class="amt num">2,934,679</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="sw" style="background:var(--seg-stay);"></span>
|
||||
<span class="nm">숙박<em>샹그릴라 막탄</em></span>
|
||||
<span class="pc num">29.4%</span>
|
||||
<span class="amt num">2,816,190</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="sw" style="background:var(--seg-etc);"></span>
|
||||
<span class="nm">공항 · 기타<em>면세점 · 카페 · 주차</em></span>
|
||||
<span class="pc num">1.3%</span>
|
||||
<span class="amt num">128,888</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>전체 내역</h2>
|
||||
<p class="lede">가계부에 기록된 지출 13건입니다. 합계 12,167,152원은 환전액 전액이 들어간 장부 기준이고, 위의 9,585,757원은 여기서 미사용 달러를 뺀 금액입니다.</p>
|
||||
<div class="scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>날짜</th><th>내역</th><th>결제수단</th><th style="text-align:right;">금액</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td class="d num">07/23</td><td>항공권 대한항공</td><td class="m">가희주머니</td><td class="a num">3,309,200</td></tr>
|
||||
<tr><td class="d num">07/24</td><td>대한항공 좌석 8석 선점</td><td class="m">현대신용</td><td class="a num">396,800</td></tr>
|
||||
<tr><td class="d num">07/27</td><td>샹그릴라 숙박</td><td class="m">현대신용</td><td class="a num">2,816,190</td></tr>
|
||||
<tr><td class="d num">08/26</td><td>달러 환전 <span class="num">$2,150</span><span class="tag">미사용분 포함</span></td><td class="m">하나은행</td><td class="a num">3,000,000</td></tr>
|
||||
<tr><td class="d num">08/27</td><td>클럽호핑<span class="tag">처제 몫 대납</span></td><td class="m">카카오뱅크</td><td class="a num">879,993</td></tr>
|
||||
<tr class="trip-open"><td colspan="4">09/02 출국 — 인천</td></tr>
|
||||
<tr><td class="d num">09/02</td><td>롯데인천공항면세점</td><td class="m">현대신용</td><td class="a num">61,800</td></tr>
|
||||
<tr><td class="d num">09/02</td><td>시티플러스제2</td><td class="m">현대신용</td><td class="a num">10,988</td></tr>
|
||||
<tr><td class="d num">09/02</td><td>엔제리너스 인천공항</td><td class="m">현대신용</td><td class="a num">6,100</td></tr>
|
||||
<tr><td class="d num">09/02</td><td>엔제리너스 인천공항</td><td class="m">현대신용</td><td class="a num">2,000</td></tr>
|
||||
<tr><td class="d num">09/03</td><td>하나머니 해외결제</td><td class="m">하나은행</td><td class="a num">870,000</td></tr>
|
||||
<tr><td class="d num">09/03</td><td>하나머니 해외결제</td><td class="m">하나은행</td><td class="a num">651,900</td></tr>
|
||||
<tr><td class="d num">09/05</td><td>하나머니 해외결제</td><td class="m">하나은행</td><td class="a num">114,181</td></tr>
|
||||
<tr class="trip-close"><td colspan="4">09/06 귀국 — 인천</td></tr>
|
||||
<tr><td class="d num">09/06</td><td>인천공항 주차</td><td class="m">카카오뱅크</td><td class="a num">48,000</td></tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr><td colspan="3">가계부 기준 합계</td><td class="a num">12,167,152</td></tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>정산 수입</h2>
|
||||
<p class="lede">여행비 중 다른 분들이 부담한 몫입니다. 지출은 그대로 두고 받은 돈을 따로 잡아, 실제로 얼마를 썼는지와 우리가 얼마를 냈는지를 함께 볼 수 있게 했습니다.</p>
|
||||
<div class="inc">
|
||||
<div class="row">
|
||||
<span class="who">장인어른 여행비용<em>09/06 · 신한은행 입금</em></span>
|
||||
<span class="amt num">3,000,000</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="who">클럽호핑 처제 몫<em>08/27 대납 → 09/07 카카오뱅크 회수</em></span>
|
||||
<span class="amt num">879,993</span>
|
||||
</div>
|
||||
<div class="total"><span>합계</span><span class="num">3,879,993</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>최종 정산</h2>
|
||||
<div class="settle">
|
||||
<div class="line"><span class="l">가계부 기준 지출</span><span class="v num">12,167,152</span></div>
|
||||
<div class="line"><span class="l">미사용 달러 <span class="num">$1,850</span> 차감</span><span class="v num">−2,581,395</span></div>
|
||||
<div class="line"><span class="l">실사용 지출</span><span class="v num">9,585,757</span></div>
|
||||
<div class="line"><span class="l">정산 수입 차감</span><span class="v num">−3,879,993</span></div>
|
||||
<div class="final"><span class="l">우리 순부담</span><span class="v num">5,705,764원</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="methods">
|
||||
<h2>집계 기준</h2>
|
||||
<ol>
|
||||
<li><b>출처</b> — 후잉 가계부의 <span class="num">여가,유흥</span> 계정 중 여행 관련 13건. 카드·계좌 문자 원문이 그대로 붙어 있는 항목만 집계했습니다.</li>
|
||||
<li><b>환율</b> — 3,000,000원 ÷ 2,150달러 = <span class="num">₩1,395.35/USD</span>. 사용액과 잔액은 이 환율로 환산했고, 두 값의 합은 환전액과 정확히 일치합니다.</li>
|
||||
<li><b>미사용 달러</b> — 가계부에는 자산으로 잡지 않았습니다. 이 결산에서만 지출에서 뺐고, 그만큼 가계부 순자산은 실제보다 적게 표시됩니다.</li>
|
||||
<li><b>하나머니 해외결제</b> — 문자에 상호가 남지 않아 <span class="num">1,636,081원</span>의 세부 내역은 구분하지 않았습니다.</li>
|
||||
<li><b>정산 수입</b> — 지출을 줄이는 대신 수입으로 따로 잡았습니다. 여행 총액은 실제로 쓴 돈 전부를 보여주고, 순부담은 수입을 뺀 값입니다.</li>
|
||||
</ol>
|
||||
<p class="colophon">기준일 2026-09-08 · 후잉 가계부 원장 기준</p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,264 @@
|
||||
/* 여행 결산 — 공용 스타일
|
||||
새 여행을 추가할 때는 이 파일을 건드리지 말고 폴더만 추가하세요.
|
||||
폴더명은 YYYY-MM-목적지 (예: 2026-09-cebu) — 시간순 정렬됩니다. */
|
||||
|
||||
:root{
|
||||
--ground:#F2F5F6;
|
||||
--surface:#FFFFFF;
|
||||
--surface-2:#E9EFF0;
|
||||
--ink:#16232B;
|
||||
--ink-2:#3D4F58;
|
||||
--muted:#6B7B82;
|
||||
--rule:#D8E1E3;
|
||||
--rule-soft:#E6ECED;
|
||||
--accent:#0E7C86;
|
||||
--accent-ink:#0B5D65;
|
||||
--accent-wash:#D9EBEC;
|
||||
--income:#2F6F4E;
|
||||
--income-wash:#DEEBE3;
|
||||
--seg-air:#0E7C86;
|
||||
--seg-stay:#2F6F4E;
|
||||
--seg-local:#B8762B;
|
||||
--seg-etc:#8A939A;
|
||||
--shadow:0 1px 2px rgba(22,35,43,.05), 0 8px 24px -18px rgba(22,35,43,.35);
|
||||
}
|
||||
@media (prefers-color-scheme: dark){
|
||||
:root:not([data-theme="light"]){
|
||||
--ground:#0F1619;
|
||||
--surface:#161E22;
|
||||
--surface-2:#1D272C;
|
||||
--ink:#E9EEEF;
|
||||
--ink-2:#BAC6CB;
|
||||
--muted:#8D9DA4;
|
||||
--rule:#263338;
|
||||
--rule-soft:#1F2A2F;
|
||||
--accent:#4FC3CE;
|
||||
--accent-ink:#7FD8E0;
|
||||
--accent-wash:#14343A;
|
||||
--income:#6FBF92;
|
||||
--income-wash:#173325;
|
||||
--seg-air:#4FC3CE;
|
||||
--seg-stay:#6FBF92;
|
||||
--seg-local:#D9A05B;
|
||||
--seg-etc:#7C888F;
|
||||
--shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -18px rgba(0,0,0,.9);
|
||||
}
|
||||
}
|
||||
:root[data-theme="dark"]{
|
||||
--ground:#0F1619;
|
||||
--surface:#161E22;
|
||||
--surface-2:#1D272C;
|
||||
--ink:#E9EEEF;
|
||||
--ink-2:#BAC6CB;
|
||||
--muted:#8D9DA4;
|
||||
--rule:#263338;
|
||||
--rule-soft:#1F2A2F;
|
||||
--accent:#4FC3CE;
|
||||
--accent-ink:#7FD8E0;
|
||||
--accent-wash:#14343A;
|
||||
--income:#6FBF92;
|
||||
--income-wash:#173325;
|
||||
--seg-air:#4FC3CE;
|
||||
--seg-stay:#6FBF92;
|
||||
--seg-local:#D9A05B;
|
||||
--seg-etc:#7C888F;
|
||||
--shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -18px rgba(0,0,0,.9);
|
||||
}
|
||||
|
||||
*{box-sizing:border-box;}
|
||||
html{-webkit-text-size-adjust:100%;}
|
||||
body{
|
||||
margin:0;
|
||||
background:var(--ground);
|
||||
color:var(--ink);
|
||||
font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
|
||||
font-size:15px;
|
||||
line-height:1.6;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
}
|
||||
.wrap{max-width:920px;margin:0 auto;padding:40px 22px 96px;}
|
||||
.num{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;}
|
||||
.eyebrow{
|
||||
font-family:"IBM Plex Mono",monospace;
|
||||
font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
|
||||
color:var(--accent);font-weight:500;
|
||||
}
|
||||
a{color:var(--accent-ink);}
|
||||
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
|
||||
|
||||
/* ── 상단 되돌아가기 ── */
|
||||
.back{
|
||||
display:inline-flex;align-items:center;gap:7px;
|
||||
font-size:13px;color:var(--muted);text-decoration:none;
|
||||
margin-bottom:24px;
|
||||
}
|
||||
.back:hover{color:var(--accent-ink);}
|
||||
.back span{font-family:"IBM Plex Mono",monospace;}
|
||||
|
||||
/* ── masthead ── */
|
||||
.masthead{border-bottom:2px solid var(--ink);padding-bottom:22px;}
|
||||
.masthead h1{
|
||||
font-family:"Gowun Batang",Georgia,serif;
|
||||
font-weight:700;font-size:clamp(38px,7vw,60px);line-height:1.04;
|
||||
margin:10px 0 0;letter-spacing:-.01em;text-wrap:balance;
|
||||
}
|
||||
.masthead .sub{color:var(--muted);font-size:14px;margin-top:10px;max-width:62ch;}
|
||||
.meta{display:flex;flex-wrap:wrap;gap:0;margin-top:22px;border-top:1px solid var(--rule-soft);}
|
||||
.meta div{flex:1 1 130px;padding:12px 16px 12px 0;border-right:1px solid var(--rule-soft);}
|
||||
.meta div:last-child{border-right:0;}
|
||||
.meta dt{font-size:11.5px;color:var(--muted);letter-spacing:.04em;margin:0 0 3px;}
|
||||
.meta dd{margin:0;font-size:15px;font-weight:500;}
|
||||
|
||||
/* ── headline figures ── */
|
||||
.figures{
|
||||
display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
|
||||
gap:1px;background:var(--rule);border-bottom:1px solid var(--rule);
|
||||
margin:0 0 44px;
|
||||
}
|
||||
.fig{background:var(--surface);padding:26px 22px 24px;}
|
||||
.fig .lab{font-size:12.5px;color:var(--muted);margin-bottom:8px;}
|
||||
.fig .val{font-size:27px;font-weight:600;letter-spacing:-.02em;}
|
||||
.fig .note{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.45;}
|
||||
.fig.lead{background:var(--accent-wash);}
|
||||
.fig.lead .lab{color:var(--accent-ink);font-weight:500;}
|
||||
.fig.lead .val{color:var(--accent-ink);font-size:31px;}
|
||||
.fig.lead .note{color:var(--accent-ink);opacity:.8;}
|
||||
.fig .sign{color:var(--income);}
|
||||
|
||||
/* ── sections ── */
|
||||
section{margin-bottom:46px;}
|
||||
h2{font-family:"Gowun Batang",Georgia,serif;font-size:21px;font-weight:700;margin:0 0 4px;letter-spacing:-.005em;}
|
||||
.lede{color:var(--muted);font-size:13.5px;margin:0 0 18px;max-width:62ch;}
|
||||
|
||||
/* ── 여행 목록 (허브) ── */
|
||||
.trips{display:grid;gap:14px;}
|
||||
.trip{
|
||||
position:relative;
|
||||
display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
|
||||
background:var(--surface);border:1px solid var(--rule);
|
||||
padding:22px 24px;color:inherit;
|
||||
box-shadow:var(--shadow);
|
||||
transition:border-color .15s ease, transform .15s ease;
|
||||
}
|
||||
.trip:hover{border-color:var(--accent);transform:translateY(-1px);}
|
||||
.trip:has(a:focus-visible){outline:2px solid var(--accent);outline-offset:3px;}
|
||||
.trip .place{
|
||||
font-family:"Gowun Batang",Georgia,serif;
|
||||
font-size:27px;font-weight:700;letter-spacing:-.01em;line-height:1.15;
|
||||
margin:0;
|
||||
}
|
||||
.trip .when{font-size:13px;color:var(--muted);margin-top:5px;}
|
||||
.trip .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
|
||||
.trip .tags b{
|
||||
font-weight:400;font-size:11.5px;color:var(--ink-2);
|
||||
background:var(--surface-2);padding:2px 8px;border-radius:2px;
|
||||
}
|
||||
.trip .cost{text-align:right;white-space:nowrap;}
|
||||
.trip .cost .k{font-size:11.5px;color:var(--muted);letter-spacing:.03em;}
|
||||
.trip .cost .v{font-size:25px;font-weight:600;color:var(--accent-ink);letter-spacing:-.02em;margin-top:2px;}
|
||||
.trip .cost .g{font-size:12px;color:var(--muted);margin-top:6px;}
|
||||
.trip .go{
|
||||
grid-column:1 / -1;margin-top:16px;padding-top:14px;
|
||||
border-top:1px solid var(--rule-soft);
|
||||
display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;
|
||||
font-size:12.5px;
|
||||
}
|
||||
.trip .go a{text-decoration:none;font-weight:500;}
|
||||
/* 결산이 이 카드의 기본 동작 — ::before 가 카드 전체를 덮는다 */
|
||||
.trip .go-main{color:var(--accent-ink);}
|
||||
.trip .go-main::after{content:" →";}
|
||||
.trip .go-main::before{content:"";position:absolute;inset:0;}
|
||||
/* 가이드는 보조 링크라 덮개 위(z-index)에 올려 제 영역만 차지한다 */
|
||||
.trip .go-alt{
|
||||
position:relative;z-index:1;color:var(--muted);
|
||||
border-left:1px solid var(--rule);padding-left:16px;
|
||||
}
|
||||
.trip .go-alt::after{content:" ↗";}
|
||||
.trip .go-alt:hover{color:var(--accent-ink);}
|
||||
|
||||
/* ── 누계 ── */
|
||||
.totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);}
|
||||
.totals div{background:var(--surface);padding:18px 20px;}
|
||||
.totals dt{font-size:11.5px;color:var(--muted);margin:0 0 5px;letter-spacing:.03em;}
|
||||
.totals dd{margin:0;font-size:20px;font-weight:600;letter-spacing:-.01em;}
|
||||
|
||||
/* ── fx ── */
|
||||
.fx{background:var(--surface);border:1px solid var(--rule);box-shadow:var(--shadow);
|
||||
display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));}
|
||||
.fx > div{padding:20px 22px;border-right:1px solid var(--rule-soft);}
|
||||
.fx > div:last-child{border-right:0;}
|
||||
.fx .k{font-size:12px;color:var(--muted);margin-bottom:6px;}
|
||||
.fx .usd{font-size:23px;font-weight:600;letter-spacing:-.01em;}
|
||||
.fx .usd small{font-size:13px;font-weight:500;color:var(--muted);margin-left:3px;letter-spacing:0;}
|
||||
.fx .krw{font-size:13.5px;color:var(--ink-2);margin-top:4px;}
|
||||
.fx .rest{background:var(--surface-2);}
|
||||
.fx .rest .usd{color:var(--accent-ink);}
|
||||
.fxnote{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.55;
|
||||
border-left:2px solid var(--accent);padding-left:12px;}
|
||||
|
||||
/* ── composition bar ── */
|
||||
.bar{display:flex;height:34px;overflow:hidden;border:1px solid var(--rule);}
|
||||
.bar span{display:block;}
|
||||
.legend{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft);}
|
||||
.legend li{background:var(--surface);display:grid;grid-template-columns:12px 1fr auto auto;
|
||||
align-items:baseline;gap:12px;padding:11px 16px;}
|
||||
.legend .sw{width:12px;height:12px;border-radius:2px;align-self:center;}
|
||||
.legend .nm{font-weight:500;}
|
||||
.legend .nm em{font-style:normal;color:var(--muted);font-weight:400;font-size:12.5px;display:block;margin-top:1px;}
|
||||
.legend .pc{color:var(--muted);font-size:13px;min-width:52px;text-align:right;}
|
||||
.legend .amt{font-weight:600;min-width:104px;text-align:right;}
|
||||
|
||||
/* ── ledger ── */
|
||||
.scroll{overflow-x:auto;border:1px solid var(--rule);background:var(--surface);}
|
||||
table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px;}
|
||||
thead th{text-align:left;font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
|
||||
color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--rule);white-space:nowrap;}
|
||||
tbody td{padding:11px 16px;border-bottom:1px solid var(--rule-soft);vertical-align:baseline;}
|
||||
tbody tr:last-child td{border-bottom:0;}
|
||||
td.d{color:var(--muted);white-space:nowrap;width:1%;}
|
||||
td.a{text-align:right;font-weight:500;white-space:nowrap;width:1%;}
|
||||
td.m{color:var(--muted);font-size:13px;white-space:nowrap;width:1%;}
|
||||
td .tag{display:inline-block;font-size:11px;letter-spacing:.03em;background:var(--accent-wash);
|
||||
color:var(--accent-ink);padding:1px 6px;border-radius:2px;margin-left:7px;vertical-align:1px;}
|
||||
tfoot td{padding:13px 16px;border-top:2px solid var(--ink);font-weight:600;background:var(--surface);}
|
||||
tr.trip-open td, tr.trip-close td{background:var(--surface-2);color:var(--muted);font-size:11.5px;
|
||||
letter-spacing:.1em;text-transform:uppercase;padding:7px 16px;}
|
||||
|
||||
/* ── income ── */
|
||||
.inc{border:1px solid var(--rule);background:var(--surface);}
|
||||
.inc .row{display:flex;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid var(--rule-soft);}
|
||||
.inc .row:last-of-type{border-bottom:0;}
|
||||
.inc .row .who{font-weight:500;}
|
||||
.inc .row .who em{font-style:normal;display:block;color:var(--muted);font-size:12.5px;font-weight:400;margin-top:1px;}
|
||||
.inc .row .amt{font-weight:600;color:var(--income);white-space:nowrap;}
|
||||
.inc .total{display:flex;justify-content:space-between;padding:14px 18px;border-top:2px solid var(--ink);
|
||||
font-weight:600;background:var(--income-wash);}
|
||||
|
||||
/* ── settle ── */
|
||||
.settle{border:1px solid var(--rule);background:var(--surface);box-shadow:var(--shadow);}
|
||||
.settle .line{display:flex;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid var(--rule-soft);}
|
||||
.settle .line .l{color:var(--ink-2);}
|
||||
.settle .line .v{font-weight:500;}
|
||||
.settle .final{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
|
||||
padding:20px;border-top:2px solid var(--ink);background:var(--accent-wash);}
|
||||
.settle .final .l{font-family:"Gowun Batang",Georgia,serif;font-size:18px;font-weight:700;color:var(--accent-ink);}
|
||||
.settle .final .v{font-size:28px;font-weight:600;color:var(--accent-ink);letter-spacing:-.02em;}
|
||||
|
||||
/* ── methods ── */
|
||||
.methods{border-top:1px solid var(--rule);padding-top:20px;}
|
||||
.methods h2{font-size:15px;margin-bottom:12px;}
|
||||
.methods ol{margin:0;padding-left:1.3em;color:var(--muted);font-size:13px;line-height:1.7;}
|
||||
.methods li{margin-bottom:7px;}
|
||||
.methods li b{color:var(--ink-2);font-weight:500;}
|
||||
.colophon{margin-top:34px;color:var(--muted);font-size:11.5px;letter-spacing:.03em;}
|
||||
|
||||
@media (max-width:560px){
|
||||
.wrap{padding:28px 16px 72px;}
|
||||
.meta div{flex-basis:50%;border-right:0;}
|
||||
.legend li{grid-template-columns:12px 1fr auto;row-gap:2px;}
|
||||
.legend .pc{grid-column:2;text-align:left;}
|
||||
.legend .amt{grid-column:3;grid-row:1;}
|
||||
.trip{grid-template-columns:1fr;gap:14px;}
|
||||
.trip .cost{text-align:left;}
|
||||
}
|
||||
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}
|
||||
@@ -0,0 +1,73 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>여행 결산</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+KR:wght@400;500;600&display=swap">
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
|
||||
<header class="masthead">
|
||||
<div class="eyebrow">Travel Settlements</div>
|
||||
<h1>여행 결산</h1>
|
||||
<p class="sub">다녀온 여행의 지출과 정산을 한 곳에 모았습니다. 각 여행을 열면 전체 원장과 집계 기준까지 볼 수 있습니다.</p>
|
||||
</header>
|
||||
|
||||
<section style="margin-top:34px;">
|
||||
<dl class="totals">
|
||||
<div><dt>기록된 여행</dt><dd class="num">1회</dd></div>
|
||||
<div><dt>총 지출</dt><dd class="num">9,585,757원</dd></div>
|
||||
<div><dt>정산 수입</dt><dd class="num">3,879,993원</dd></div>
|
||||
<div><dt>순부담 누계</dt><dd class="num">5,705,764원</dd></div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>여행 기록</h2>
|
||||
<p class="lede">최근 다녀온 순서입니다.</p>
|
||||
|
||||
<div class="trips">
|
||||
<!-- 새 여행 추가: 폴더(YYYY-MM-목적지)를 만들고 이 블록을 복사해 맨 위에 두세요.
|
||||
go-alt 는 여행 가이드 사이트 링크입니다. 가이드가 없는 여행이면 그 줄만 지우세요. -->
|
||||
<article class="trip">
|
||||
<div>
|
||||
<h3 class="place">세부</h3>
|
||||
<div class="when num">2026.09.02 – 09.06 · 4박 5일</div>
|
||||
<div class="tags">
|
||||
<b>필리핀</b>
|
||||
<b>샹그릴라</b>
|
||||
<b class="num">항공 8석</b>
|
||||
<b>가족</b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cost">
|
||||
<div class="k">순부담</div>
|
||||
<div class="v num">5,705,764원</div>
|
||||
<div class="g num">총 지출 9,585,757원</div>
|
||||
</div>
|
||||
<div class="go">
|
||||
<a class="go-main" href="2026-09-cebu/">결산 보기</a>
|
||||
<a class="go-alt" href="/cebu/">여행 가이드</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="methods">
|
||||
<h2>공통 기준</h2>
|
||||
<ol>
|
||||
<li><b>출처</b> — 후잉 가계부 원장. 카드·계좌 문자 원문이 붙어 있는 항목만 집계합니다.</li>
|
||||
<li><b>총 지출</b> — 실제로 쓴 금액입니다. 환전 후 남은 외화처럼 아직 쓰지 않은 돈은 뺍니다.</li>
|
||||
<li><b>정산 수입</b> — 다른 분이 부담한 몫은 지출을 줄이지 않고 수입으로 따로 잡습니다. 여행 총액은 실제로 쓴 돈 전부를 보여주고, 순부담은 거기서 수입을 뺀 값입니다.</li>
|
||||
</ol>
|
||||
<p class="colophon">최종 갱신 2026-09-08</p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user