hyowons
265 lines
12 KiB
CSS
265 lines
12 KiB
CSS
/* 여행 결산 — 공용 스타일
|
|
새 여행을 추가할 때는 이 파일을 건드리지 말고 폴더만 추가하세요.
|
|
폴더명은 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;}}
|