/* =========================================================================== costapp — ระบบดีไซน์ (รื้อใหม่ 2026-09-20) แนวทาง: แอปการเงินเกาหลีสมัยใหม่ (Toss/KakaoBank) — ขาวสะอาด ตัวเลขเป็นพระเอก การ์ดใช้เงานุ่มแทนเส้นขอบเทา ไอคอนเป็น SVG เส้นชุดเดียวกันหมด ไม่ใช้อีโมจิ ของเดิมเก็บไว้ที่ styles.css.bak เผื่อย้อน =========================================================================== */ /* ---- ฟอนต์: โฮสต์เอง ไม่พึ่ง CDN ภายนอก (ใช้ได้แม้เน็ตบล็อก google) ---- โหลดเฉพาะ subset ที่แอปนี้ใช้จริง = 76KB ทั้งคู่ เกาหลีใช้ฟอนต์ระบบ (Apple SD Gothic Neo / Noto Sans KR) ซึ่งสวยอยู่แล้ว และเป็นบรรทัดรอง — ไม่คุ้มที่จะโหลดฟอนต์เกาหลีเต็มชุดหลายเมกะไบต์ */ @font-face{ font-family:'Inter var';src:url('/fonts/inter-latin.woff2') format('woff2'); font-weight:400 800;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Noto Sans Thai var';src:url('/fonts/noto-thai.woff2') format('woff2'); font-weight:400 800;font-style:normal;font-display:swap; unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; } :root{ /* พื้นผิว */ --page:#F2F4F6; --card:#FFFFFF; --sunken:#F7F8FA; --line:rgba(25,31,40,.07); /* ตัวอักษร */ --ink:#191F28; --ink2:#4E5968; --muted:#8B95A1; /* แบรนด์ + สถานะ (คู่สีกราฟผ่านการตรวจตาบอดสีแล้ว) */ --brand:#0F8A7A; --brand-ink:#0A6B5E; --brand-wash:#E7F5F2; --good:#0F8A7A; --bad:#D03B3B; --warn:#B7791F; --warn-wash:#FFF7E8; --bad-wash:#FDECEC; /* รูปทรง */ --r-card:20px; --r-field:14px; --r-btn:14px; --sh-card:0 1px 2px rgba(25,31,40,.04), 0 8px 24px -10px rgba(25,31,40,.12); --sh-lift:0 2px 6px rgba(25,31,40,.06), 0 16px 32px -12px rgba(25,31,40,.18); --nav-h:60px; color-scheme:light; } @media (prefers-color-scheme:dark){ :root{ --page:#0B0E11; --card:#151A20; --sunken:#1A2027; --line:rgba(255,255,255,.08); --ink:#ECEFF3; --ink2:#B6C0CC; --muted:#828D9A; --brand:#19B39C; --brand-ink:#3ECFB8; --brand-wash:rgba(25,179,156,.12); --good:#19B39C; --bad:#F05B5B; --warn:#E0A33A; --warn-wash:rgba(224,163,58,.12); --bad-wash:rgba(240,91,91,.12); --sh-card:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -12px rgba(0,0,0,.6); --sh-lift:0 2px 8px rgba(0,0,0,.5), 0 18px 36px -14px rgba(0,0,0,.7); color-scheme:dark; } } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--page);color:var(--ink); font-family:'Inter var','Noto Sans Thai var',-apple-system,BlinkMacSystemFont, 'Apple SD Gothic Neo','Pretendard','Noto Sans KR','Malgun Gothic',Roboto,sans-serif; font-size:15px;line-height:1.55;letter-spacing:-.005em; -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased; font-feature-settings:'tnum' 0; } /* ตัวเลขเงินต้องกว้างเท่ากันทุกหลัก ไม่งั้นตัวเลขจะ "เต้น" ตอนอัปเดตสด */ .amt,.hero-v,.tile .v,.li span:last-child,.li b:last-child,table.t td.r, .chart .read b,.code,input[type=number],.big{font-variant-numeric:tabular-nums} .wrap{max-width:560px;margin:0 auto;padding:12px 16px calc(var(--nav-h) + 44px)} /* ---------- หัวเรื่อง ---------- */ h1{font-size:25px;line-height:1.25;font-weight:800;letter-spacing:-.025em;margin:6px 0 16px} h2{font-size:17px;line-height:1.35;font-weight:700;letter-spacing:-.018em;margin:0 0 12px} p.lead{color:var(--ink2);margin:0 0 16px;font-size:14.5px} .hint{font-size:13px;line-height:1.5;color:var(--muted);margin-top:6px} .muted{color:var(--muted)} .hidden{display:none !important} .mt0{margin-top:0} a{color:var(--brand);text-decoration:none;font-weight:600} /* ---------- แถบบนสุด ---------- */ header.top{ position:sticky;top:0;z-index:30;background:var(--page); padding:14px 16px 10px;display:flex;align-items:center;gap:12px; transition:box-shadow .2s ease, background .2s ease; } header.top.stuck{box-shadow:0 1px 0 var(--line)} header.top .name{font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.25} header.top .sub{color:var(--muted);font-size:12.5px;line-height:1.3;margin-top:1px} header.top .spacer{flex:1} /* ---------- ไอคอน ---------- */ .ic{width:24px;height:24px;flex:none;stroke:currentColor;fill:none; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .ic-sm{width:18px;height:18px} /* ไอคอนที่แทรกอยู่กลางบรรทัดข้อความ (.hint/.neg/.t1) ต้องเลื่อนลงให้นั่งบนเส้นฐานตัวอักษร */ .ic-inline{vertical-align:-4px;margin-right:5px} .ic-warn{color:var(--warn)} .ic-good{color:var(--good)} .ic-bad{color:var(--bad)} /* ---------- การ์ด ---------- */ .card{background:var(--card);border-radius:var(--r-card);padding:20px 18px;margin:12px 0; box-shadow:var(--sh-card)} /* ---------- ตัวเลขพระเอก ---------- */ .hero{background:var(--card);border-radius:var(--r-card);padding:22px 20px 20px; margin:12px 0;box-shadow:var(--sh-card)} .hero-k{font-size:13.5px;font-weight:600;color:var(--muted);letter-spacing:-.01em} .hero-v{font-size:40px;line-height:1.1;font-weight:800;letter-spacing:-.035em;margin:10px 0 0} .hero-v.neg{color:var(--bad)} .hero-d{display:inline-flex;align-items:center;gap:4px;margin-top:10px; font-size:13px;font-weight:700;padding:5px 10px 5px 8px;border-radius:999px; background:var(--brand-wash);color:var(--brand-ink)} .hero-d.down{background:var(--bad-wash);color:var(--bad)} .hero-d.flat{background:var(--sunken);color:var(--muted)} .hero-sub{font-size:13px;color:var(--muted);margin-top:10px} /* ---------- tile เล็ก ---------- */ .tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0} .tile{background:var(--card);border-radius:var(--r-card);padding:16px 15px;box-shadow:var(--sh-card)} .tile .k{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:6px} .tile .v{font-size:20px;font-weight:800;letter-spacing:-.025em;line-height:1.2} .tile .v.pos{color:var(--ink)} .tile .v.neg{color:var(--bad)} .tile .s{font-size:12px;color:var(--muted);margin-top:4px} .tile.wide{grid-column:1/-1} /* ---------- ป้ายสองภาษา ---------- */ .ko{display:block;font-size:.8em;line-height:1.3;font-weight:500;color:var(--muted); letter-spacing:0} h1 .ko,h2 .ko{font-size:.58em;font-weight:600;margin-top:3px} label .ko{font-size:.85em;font-weight:500} .btn .ko{color:rgba(255,255,255,.8);font-size:.74em;margin-top:1px} .btn.ghost .ko{color:var(--brand);opacity:.75} .tabs button .ko{font-size:.78em;color:inherit;opacity:.7} nav.bottom button .ko{font-size:9px;line-height:1.1;color:inherit;opacity:.7;margin-top:0} .tile .k .ko,.hero-k .ko{font-size:.92em;display:inline;color:inherit;opacity:.75} .row .t1 .ko{font-size:.78em} .hint .ko{font-size:.95em;opacity:.85} .live .big .ko{font-size:.5em;color:var(--ink2);opacity:.8} /* ---------- ฟอร์ม ---------- */ label{display:block;font-size:14px;font-weight:700;letter-spacing:-.012em;margin:16px 0 7px} input,select,textarea{ width:100%;padding:14px 15px;border:1.5px solid transparent;border-radius:var(--r-field); font-size:16px;font-family:inherit;font-weight:600;letter-spacing:-.01em; background:var(--sunken);color:var(--ink);transition:border-color .15s,background .15s; } input::placeholder{color:var(--muted);font-weight:500} input:focus,select:focus,textarea:focus{ outline:none;border-color:var(--brand);background:var(--card); box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 12%,transparent); } select{appearance:none;-webkit-appearance:none;padding-right:42px; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%), linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px; background-size:6px 6px,6px 6px;background-repeat:no-repeat; } .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .grid2 label{margin-top:16px} /* ---------- ปุ่ม ---------- */ .btn{ display:flex;flex-direction:column;align-items:center;justify-content:center; width:100%;padding:15px;border:0;border-radius:var(--r-btn); background:var(--brand);color:#fff;font-size:16px;font-weight:700;letter-spacing:-.015em; font-family:inherit;cursor:pointer;margin-top:18px;line-height:1.25; transition:transform .12s ease,filter .15s ease; } .btn:active{transform:scale(.978);filter:brightness(.94)} .btn[disabled]{opacity:.5;transform:none} .btn.ghost{background:var(--brand-wash);color:var(--brand-ink)} .btn.danger{background:var(--bad-wash);color:var(--bad)} .btn.danger .ko{color:var(--bad);opacity:.7} .btn.sm{width:auto;display:inline-flex;padding:10px 16px;font-size:14px;margin:0} .btn .lbl{display:flex;align-items:center;justify-content:center;gap:8px} .btn .lbl .ic{flex:none} .btn .lbl>span{display:block;text-align:center} .actions{display:flex;gap:10px;margin-top:20px} .actions .btn{margin-top:0} .tabs{display:flex;gap:6px;background:var(--sunken);padding:4px;border-radius:14px;margin-bottom:6px} .tabs button{ flex:1;padding:11px 8px;border:0;background:transparent;color:var(--muted); border-radius:11px;font-size:14.5px;font-weight:700;font-family:inherit;cursor:pointer; transition:background .18s ease,color .18s ease; } .tabs button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(25,31,40,.1)} /* ---------- แถบเมนูล่าง ---------- */ nav.bottom{ position:fixed;left:0;right:0;bottom:0;z-index:40; background:color-mix(in srgb,var(--card) 88%,transparent); backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px); border-top:1px solid var(--line);display:flex; padding-bottom:env(safe-area-inset-bottom); } nav.bottom button{ flex:1;border:0;background:none;font-family:inherit;cursor:pointer; padding:8px 2px 9px;color:var(--muted);font-size:10.5px;font-weight:600;line-height:1.25; display:flex;flex-direction:column;align-items:center;gap:2px; transition:color .18s ease; } nav.bottom button .ic{transition:transform .18s cubic-bezier(.34,1.56,.64,1)} nav.bottom button.on{color:var(--brand)} nav.bottom button.on .ic{transform:translateY(-1px) scale(1.06);stroke-width:2.1} /* ---------- รายการ ---------- */ .row{display:flex;align-items:center;gap:12px;padding:14px 0;cursor:pointer; border-bottom:1px solid var(--line);transition:opacity .15s} .row:first-child{padding-top:2px} .row:last-child{border-bottom:0;padding-bottom:2px} .row:active{opacity:.55} .row .g{flex:1;min-width:0} .row .t1{font-weight:700;letter-spacing:-.015em;font-size:15.5px} .row .t2{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4} .row .amt{text-align:right;white-space:nowrap;font-weight:800;letter-spacing:-.02em} .row .amt .t2{font-weight:500} .empty{text-align:center;color:var(--muted);padding:30px 12px;font-size:14.5px;line-height:1.6} /* ---------- แถบสัดส่วนกำไร ---------- */ .bar-track{height:6px;border-radius:999px;background:var(--sunken);overflow:hidden;margin-top:9px} .bar-fill{height:100%;border-radius:999px;background:var(--brand); transition:width .6s cubic-bezier(.22,1,.36,1)} .bar-fill.low{background:var(--warn)} .bar-fill.neg{background:var(--bad)} /* ---------- chips ---------- */ .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .chips button{ border:1.5px solid var(--line);background:var(--card);color:var(--ink2);border-radius:999px; padding:10px 17px;font-size:14.5px;font-weight:700;font-family:inherit;cursor:pointer; transition:all .15s ease; } .chips button.on{background:var(--ink);color:var(--card);border-color:var(--ink)} /* ---------- กราฟ ---------- */ .chart{--pos:#0f8a7a;--neg:#d03b3b;margin-top:4px} @media (prefers-color-scheme:dark){.chart{--pos:#19B39C;--neg:#F05B5B}} .chart .plot{display:flex;align-items:flex-end;gap:2px;height:104px} .chart .col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end; height:100%;cursor:pointer;position:relative} .chart .bar{background:var(--pos);border-radius:4px 4px 0 0;min-height:2px; animation:grow .5s cubic-bezier(.22,1,.36,1) both} @keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}} .chart .bar{transform-origin:bottom} .chart .plotneg{display:flex;gap:2px;align-items:flex-start;border-top:1px solid var(--line)} .chart .plotneg .col{flex:1;min-width:0;display:flex;flex-direction:column; justify-content:flex-start;height:100%;cursor:pointer} .chart .plotneg .bar{background:var(--neg);border-radius:0 0 4px 4px;transform-origin:top} .chart .col[aria-selected=true] .bar{outline:2px solid var(--ink);outline-offset:1.5px} .chart .xax{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted); margin-top:8px;font-weight:600} .chart .read{font-size:13px;color:var(--ink2);margin-top:10px;min-height:20px; padding-top:10px;border-top:1px solid var(--line)} /* ---------- ตาราง ---------- */ table.t{width:100%;border-collapse:collapse;font-size:14px} table.t th,table.t td{padding:11px 6px;border-bottom:1px solid var(--line);text-align:left} table.t td:first-child{white-space:nowrap} table.t th{color:var(--muted);font-weight:600;font-size:12px} table.t td.r,table.t th.r{text-align:right} table.t tr:last-child td{border-bottom:0} .pos{color:var(--good)} .neg{color:var(--bad)} /* ---------- แผ่นเลื่อนขึ้น ---------- */ .sheet{position:fixed;inset:0;z-index:60;display:none} .sheet.on{display:block} .sheet .scrim{position:absolute;inset:0;background:rgba(9,14,19,.5); animation:fadeIn .22s ease both;backdrop-filter:blur(2px)} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .sheet .panel{ position:absolute;left:0;right:0;bottom:0;max-height:93vh;overflow:auto; background:var(--page);border-radius:24px 24px 0 0; padding:8px 16px calc(26px + env(safe-area-inset-bottom)); box-shadow:0 -8px 40px rgba(9,14,19,.22); animation:slideUp .32s cubic-bezier(.22,1,.36,1) both; } @keyframes slideUp{from{transform:translateY(14%);opacity:.6}to{transform:none;opacity:1}} /* ขีดจับด้านบนแบบ bottom sheet ของ iOS — บอกว่าแผ่นนี้ปิดได้ */ .sheet .panel::before{content:'';display:block;width:40px;height:4px;border-radius:999px; background:var(--line);margin:0 auto 14px} .sheet h2{display:flex;align-items:flex-start;gap:10px;margin-bottom:4px} .sheet h2 .x{margin-left:auto;cursor:pointer;color:var(--muted);flex:none; width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--sunken)} /* ---------- กล่องผลลัพธ์สด ---------- */ .live{background:var(--brand-wash);border-radius:16px;padding:16px;margin-top:18px} .live .big{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.2;margin-bottom:8px} .live .li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--ink2); padding:3px 0;font-weight:600} .live .li b{font-weight:800} /* ---------- ป้ายเตือน ---------- */ .warn{background:var(--warn-wash);border-radius:16px;padding:15px 16px;margin:12px 0;font-size:14px; line-height:1.55} .warn.bad{background:var(--bad-wash)} .warn .h{display:flex;gap:8px;align-items:flex-start;font-weight:800;margin-bottom:6px; letter-spacing:-.015em} .warn .h .ic{flex:none;margin-top:1px;color:var(--warn)} .warn.bad .h .ic{color:var(--bad)} .warn ul{margin:8px 0 0;padding-left:20px} .warn li{margin:4px 0} /* ---------- การ์ดเลือก (รูปแบบธุรกิจ) ---------- ใช้แทน