:root{
  --brand:#6BAEAA;
  --ink:#142022;
  --bg:#fafafa;
  --hair:#e8edf3;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans TC","PingFang TC",Arial}
/* Header */
.header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  background:var(--brand);color:#fff;padding:12px 14px}
.title{font-weight:900;letter-spacing:.02em;text-align:center;flex:1}
.lang{display:flex;gap:6px}
.lang button{border:0;background:#fff;color:#256b67;border-radius:8px;padding:6px 10px;
  font-weight:800;cursor:pointer}
/* Hamburger */
.hamburger{width:26px;height:20px;position:relative;cursor:pointer}
.hamburger span{position:absolute;left:0;right:0;height:3px;background:#fff;border-radius:3px}
.hamburger span:nth-child(1){top:0}.hamburger span:nth-child(2){top:8.5px}.hamburger span:nth-child(3){bottom:0}
/* Drawer */
.drawer{position:fixed;inset:0 35% 0 0;max-width:320px;background:#fff;border-right:1px solid var(--hair);
  transform:translateX(-100%);transition:.25s ease;z-index:50;padding:18px 14px}
.drawer.open{transform:translateX(0)}
.drawer h3{margin:0 0 10px;font-weight:900;color:#2e5350}
.drawer a{display:block;padding:12px 8px;margin:6px 0;border-radius:10px;text-decoration:none;color:#123}
.drawer a:hover{background:#f2fbfa}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.28);opacity:0;visibility:hidden;transition:.25s ease;z-index:45}
.scrim.show{opacity:1;visibility:visible}
/* Container */
.container{max-width:860px;margin:0 auto;padding:16px}
.card{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:16px;margin:12px 0}
h1,h2{margin:0 0 10px;font-weight:900;letter-spacing:.02em;color:#245f5b}
label{display:block;font-weight:900;margin:10px 0 6px;color:#2e5350}
input[type=number]{width:100%;max-width:300px;border:2px solid #dfe8e7;border-radius:12px;padding:12px 14px;font-weight:900}
.result{margin-top:12px;text-align:center}
.big{font-size:40px;font-weight:1000;letter-spacing:.06em;color:#2f8a84}
.hint{font-size:14px;color:#607176;margin-top:6px}
table{width:100%;border-collapse:collapse;margin-top:8px}
th,td{border:1px solid var(--hair);padding:10px 8px;text-align:center}
th{background:#f6fbfa}
/* Footer */
footer{margin:28px 0 14px;text-align:center;color:#738389}
footer a{color:#2f8a84;text-decoration:none}
/* LINE floating */
.lineFab{position:fixed;right:14px;bottom:16px;z-index:60;display:flex;gap:8px;align-items:center;
  padding:10px 14px;border-radius:999px;background:#fff;border:1px solid var(--hair);font-weight:900;
  box-shadow:0 10px 24px rgba(0,0,0,.24);color:#16c05b;text-decoration:none}
.lineDot{width:8px;height:8px;border-radius:50%;background:#20c15a;box-shadow:0 0 0 3px rgba(32,193,90,.15)}

/* K logo (circle) */
.klogo{width:28px;height:28px;border-radius:50%;background:#287f7a;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:900;margin-left:10px}