:root{--bg:#f5f7fa;--card:#fff;--ink:#1c2430;--muted:#6b7684;--line:#e3e8ee;--brand:#2f6fed;
--ok:#12a150;--okbg:#e9f8ef;--warn:#e08a00;--warnbg:#fff5e3;--bad:#d93a3a;--badbg:#fdecec;--field:#fff;--soft:rgba(255,255,255,.7);--autobg:#fffbe0;--adbg:#eceff3;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,"Apple SD Gothic Neo","Pretendard","Malgun Gothic",sans-serif;line-height:1.55}
.top{padding:24px 16px 8px;max-width:760px;margin:auto}
h1{font-size:1.5rem;margin:0}
.sub{margin:6px 0 0;color:var(--muted)}
main{max-width:760px;margin:auto;padding:8px 16px 24px}
.card{background:var(--card);border-radius:16px;padding:18px;margin:12px 0;box-shadow:0 1px 3px rgba(0,0,0,.06)}
h2{font-size:1.1rem;margin:0 0 10px}
.muted{color:var(--muted);font-size:.9rem}
.result{text-align:center;border:2px solid transparent;position:sticky;top:8px;z-index:5}
.result.ok{background:var(--okbg);border-color:var(--ok)}
.result.warn{background:var(--warnbg);border-color:var(--warn)}
.result.bad{background:var(--badbg);border-color:var(--bad)}
.r-label{font-weight:700;font-size:1rem}
.ok .r-label{color:var(--ok)}.warn .r-label{color:var(--warn)}.bad .r-label{color:var(--bad)}
.r-big{font-size:2.4rem;font-weight:800;letter-spacing:-.02em;margin:2px 0}
.r-sub{color:var(--ink);font-size:.95rem}
.r-warn{list-style:none;padding:0;margin:8px 0 0;text-align:left;font-size:.9rem}
.r-warn li{background:var(--soft);border-radius:8px;padding:6px 10px;margin-top:6px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.examples{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:.85rem;cursor:pointer}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.btn{background:var(--brand);color:#fff;border:0;border-radius:10px;padding:10px 16px;font-size:1rem;cursor:pointer;margin-top:8px}
.btn.ghost{background:none;color:var(--muted)}
.order{border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0}
.order-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.o-badge{font-size:.8rem;font-weight:600;margin-left:6px}
.x{border:0;background:none;font-size:1.4rem;color:var(--muted);cursor:pointer}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid label{display:flex;flex-direction:column;font-size:.85rem;color:var(--muted);gap:4px}
.grid .wide{grid-column:1/-1}
.grid .check{flex-direction:row;align-items:center;gap:8px;color:var(--ink)}
input,select{font:inherit;font-size:16px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--field);color:var(--ink);width:100%}
.check input{width:auto}
.money{display:flex;gap:6px}.money input{flex:1;min-width:0}.money select{width:84px}
.fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.fx-grid label{font-size:.85rem;color:var(--muted)}
.tip{display:inline-block;position:relative;border-bottom:1px dashed var(--brand);color:var(--brand);cursor:help}
.tip[data-tip]:focus::after,.tip[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;transform:translateX(-50%);top:130%;width:240px;background:#1c2430;color:#fff;font-size:.8rem;font-weight:400;padding:8px 10px;border-radius:8px;z-index:20;line-height:1.45;text-align:left}
.explain ol{padding-left:20px}.explain li{margin:6px 0}
.notice{background:var(--warnbg);border-radius:8px;padding:10px;font-size:.9rem}
.src{font-size:.85rem}.src a{color:var(--brand)}
.foot{text-align:center;color:var(--muted);font-size:.8rem;padding:16px}
.grid label .tip{align-self:flex-start}
@media(max-width:520px){.result{position:static}.grid{grid-template-columns:1fr}.r-big{font-size:2rem}.tip[data-tip]:hover::after,.tip[data-tip]:focus::after{left:0;transform:none;width:200px}}
.photo{display:block;text-align:center;background:var(--brand);color:#fff;font-weight:700;font-size:1.1rem;padding:16px;border-radius:12px;cursor:pointer}
.center{text-align:center;margin:8px 0 0}
details.card summary{cursor:pointer;font-weight:700}
details .fx-grid,details ul{margin-top:10px}
.explain ul{padding-left:18px}
input.auto,select.auto{background:var(--autobg);border-color:#f0c400}
input.check-me,select.check-me{background:var(--warnbg);border-color:var(--warn)}
.ad{background:var(--adbg);color:var(--muted);font-size:.8rem;display:flex;align-items:center;justify-content:center;border-radius:12px}
.ad.inline{height:100px;margin:20px 0}
.ad.rail{display:none;position:fixed;top:80px;width:160px;height:600px}
.ad.rail.left{left:calc(50% - 380px - 190px)}.ad.rail.right{right:calc(50% - 380px - 190px)}
@media(min-width:1200px){.ad.rail{display:flex}}
.home{color:var(--brand);text-decoration:none;font-size:.9rem}
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tool{display:block;text-decoration:none;color:var(--ink);background:var(--card);border-radius:16px;padding:18px;box-shadow:0 1px 3px rgba(0,0,0,.06);border:2px solid transparent}
a.tool:hover{border-color:var(--brand)}
.tool .ic{font-size:1.8rem}.tool b{display:block;margin:6px 0 2px;font-size:1.05rem}
.tool.soon{opacity:.55}
.menu{position:relative;margin-bottom:8px}
.menu summary{display:inline-block;list-style:none;cursor:pointer;font-size:.9rem;font-weight:600;color:var(--brand);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;top:110%;left:0;z-index:30;background:var(--card);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.12);padding:6px;min-width:240px}
.menu nav a,.menu nav span{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ink)}
.menu nav a:hover,.menu nav a.on{background:var(--bg)}
.menu nav span{color:var(--muted)}
.g-title{font-size:1.35rem;line-height:1.4}
.article h2{margin-top:22px}
.article table{width:100%;border-collapse:collapse;font-size:.92rem}
.article th,.article td{border-bottom:1px solid var(--line);padding:8px;text-align:left}
.article th{background:var(--bg)}
.cta{text-align:center;margin-top:24px}.cta .btn{text-decoration:none;display:inline-block}
.g-link{display:block;padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.g-link:last-child{border:0}
.cmp{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(0,0,0,.15);font-size:.95rem}
.cmp label{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.cmp input{width:150px}
#cmpOut{margin-top:6px}.good{color:var(--ok)}b.bad{color:var(--bad)}
.unit{align-self:center;color:var(--muted)}
.cmp-table{width:100%;border-collapse:collapse;font-size:.95rem}
.cmp-table th,.cmp-table td{padding:10px 6px;border-bottom:1px solid var(--line);text-align:right}
.cmp-table td:first-child,.cmp-table th:first-child{text-align:left;color:var(--muted)}
.cmp-table .sum td{font-weight:800;border:0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#12161c;--card:#1b2129;--ink:#e6eaf0;--muted:#97a1ad;--line:#2c3440;--brand:#6c9bff;--ok:#3ccf7a;--okbg:#14291e;--warn:#f0a63a;--warnbg:#2e2412;--bad:#ff6b6b;--badbg:#311a1c;--field:#12161c;--soft:rgba(0,0,0,.25);--autobg:#2e2a12;--adbg:#222933;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#12161c;--card:#1b2129;--ink:#e6eaf0;--muted:#97a1ad;--line:#2c3440;--brand:#6c9bff;--ok:#3ccf7a;--okbg:#14291e;--warn:#f0a63a;--warnbg:#2e2412;--bad:#ff6b6b;--badbg:#311a1c;--field:#12161c;--soft:rgba(0,0,0,.25);--autobg:#2e2a12;--adbg:#222933;color-scheme:dark}
.theme{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:5px 10px;cursor:pointer;font-size:.9rem;float:right;position:relative;z-index:31}
.item-row{display:flex;gap:6px;margin:8px 0}.item-row input{flex:1;min-width:0}.item-row select{width:90px}
.item-row select[name=kind]{width:auto;flex:1.2;min-width:0}
@media(max-width:520px){.item-row{flex-wrap:wrap}.item-row select[name=kind]{flex-basis:100%}}