/* 공개 정적 페이지 공통 스타일(앱 style.css 와 별개, 가볍게). 외부 폰트·이미지 없음. */
:root{--g:#2d6a45;--ink:#1f2a24;--mut:#5b6b61;--line:#dfe7dc;--bg:#f7f9f5}
*{box-sizing:border-box}
body{margin:0;font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7;font-size:16px}
a{color:var(--g)}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:12px 16px;background:#fff;border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:20px;text-decoration:none;color:var(--g)}
.top nav{display:flex;flex-wrap:wrap;gap:4px 16px}.top nav a{text-decoration:none;color:var(--ink);padding:6px 0}
main{max-width:820px;margin:0 auto;padding:20px 16px 40px}
h1{font-size:26px;line-height:1.35;margin:.4em 0 .5em}h2{font-size:20px;margin:1.6em 0 .5em}h3{font-size:16px;margin:1em 0 .4em}
.lead{font-size:17px;color:#33433a}
.crumbs{font-size:13px;color:var(--mut)}.crumbs a{color:var(--mut)}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:280px;font-size:14px;background:#fff}
th,td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}th{background:#eef3ea;white-space:nowrap}
.two{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}.two>div{min-width:0}@media(min-width:720px){.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.links{padding-left:20px}.links li{margin:.2em 0}
.src{margin-top:24px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:14px;color:var(--mut)}
.btn{display:inline-block;background:var(--g);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none}
.todo{background:#fff4e5;border:1px solid #f0c78a;padding:10px 12px;border-radius:8px}
small{color:var(--mut)}
footer{border-top:1px solid var(--line);background:#fff;padding:16px;font-size:14px;color:var(--mut)}
.legal{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:8px}.legal a{color:var(--ink)}
/* 유가 페이지: 요약 카드, 현재 지역 강조, 숫자 줄바꿈 방지 */
.cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:12px 0}
.cards .card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.cards .card b{font-size:22px;line-height:1.3;color:var(--g)}
tr.me td{background:#fff8e1;font-weight:700}
td:nth-child(n+2){white-space:nowrap}table.top td:nth-child(2){white-space:normal;min-width:150px}table.top td:nth-child(3){text-align:right}table.cmp{font-size:13px}table.cmp th,table.cmp td{padding:7px 5px}.unit{margin:.6em 0 .2em;font-size:13px;color:var(--mut)}