:root { --navy:#355e4b; --navy-2:#4d664f; --blue:#355e4b; --blue-light:#dce4d4; --gold:#9a4e32; --gold-light:#efe4d2; --ink:#24352c; --muted:#5f695f; --line:#cbbeaa; --surface:#fbf8f1; --bg:#eee7da; --danger:#943e34; --danger-bg:#f7e7df; --success:#46633f; --radius:14px; --shadow:0 8px 28px rgba(57,48,35,.12); }
* { box-sizing:border-box; }
html { max-width:100%; overflow-x:hidden; scroll-behavior:smooth; }
body { max-width:100%; margin:0; overflow-x:hidden; color:var(--ink); background:var(--bg); font-family:Tahoma,"Noto Sans Thai",system-ui,sans-serif; font-size:16px; line-height:1.55; }
button,input,select { font:inherit; }
button,input,select,a { -webkit-tap-highlight-color:transparent; }
a { color:var(--blue); }
.container { width:min(1240px,calc(100% - 32px)); margin-inline:auto; }
.skip-link { position:fixed; z-index:100; top:8px; left:8px; padding:10px 14px; background:#fff; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.site-header { padding:32px 0 28px; color:#fff; background:linear-gradient(125deg,var(--navy),var(--navy-2)); border-bottom:5px solid var(--gold); }
.header-inner,.section-heading,.inline-heading,.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:8px; font-size:clamp(1.65rem,4vw,2.5rem); line-height:1.2; }
h2 { margin-bottom:0; font-size:1.55rem; }
h3 { margin-bottom:6px; font-size:1.05rem; }
.eyebrow { margin-bottom:5px; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#e7d6b7; }
.header-icon { width:20px; height:20px; margin-right:7px; vertical-align:middle; border-radius:5px; }
.lead { max-width:720px; margin:0; color:#f0e9dc; }
.policy-badge,.status-badge { flex:none; display:inline-flex; padding:7px 11px; border-radius:999px; font-size:.82rem; font-weight:700; }
.policy-badge { background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.3); }
.header-actions { display:flex; flex:none; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.version-link { display:inline-flex; flex-direction:column; align-items:center; padding:6px 12px; color:#fff; background:var(--blue); border:1px solid rgba(255,255,255,.45); border-radius:12px; font-size:.82rem; font-weight:700; line-height:1.15; text-decoration:none; }
.version-link small { margin-top:2px; color:#e8e2d5; font-size:.62rem; font-weight:400; }
.version-link:hover { background:#4d755f; }
.status-badge { color:var(--navy); background:var(--gold-light); border:1px solid #ebcf82; }
.page-grid { display:grid; gap:24px; padding-block:28px 44px; }
.calculator-panel,.results,.disclaimer { min-width:0; padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.auto-save { margin:5px 0 0; color:var(--success); font-size:.88rem; }
.step-nav { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:16px 0; }
.step-nav a { min-width:0; padding:7px 9px; color:var(--navy); background:var(--blue-light); border-radius:8px; font-size:.82rem; font-weight:700; text-decoration:none; }
.step-nav span,.step-number { display:inline-grid; place-items:center; width:25px; height:25px; margin-right:5px; color:#fff; background:var(--blue); border-radius:50%; }
form { display:grid; gap:12px; }
.step-card { min-width:0; margin:0; padding:14px; border:1px solid var(--line); border-radius:10px; }
.step-card legend { padding:0 6px; color:var(--navy); font-size:1.05rem; font-weight:700; }
.section-help { margin:0 0 10px; color:var(--muted); font-size:.82rem; }
.form-grid { display:grid; gap:11px; }
.three-cols { grid-template-columns:repeat(3,minmax(0,1fr)); }
.two-cols { grid-template-columns:repeat(2,minmax(0,1fr)); }
.full-width { grid-column:1/-1; }
.field { min-width:0; }
.field label { display:block; margin-bottom:6px; color:var(--ink); font-size:.9rem; font-weight:700; }
.field-label { display:block; margin-bottom:6px; color:var(--ink); font-size:.9rem; font-weight:700; }
.birth-date-inputs { display:grid; grid-template-columns:1.15fr 1fr .72fr; gap:6px; }
.field .birth-date-inputs label { margin:0; color:var(--muted); font-size:.68rem; font-weight:400; }
.birth-date-inputs label span { display:block; margin-bottom:3px; }
.birth-date-inputs input,.birth-date-inputs select { min-height:40px; padding:7px; }
.field small { display:block; margin-top:5px; color:var(--muted); font-size:.76rem; }
.field small.field-warning { color:#7d492f; }
input,select { width:100%; min-height:44px; padding:9px 11px; color:var(--ink); background:#fffdf8; border:1px solid #a99e8b; border-radius:8px; }
input:focus,select:focus,button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid rgba(53,94,75,.28); outline-offset:2px; border-color:var(--blue); }
input:invalid:not(:placeholder-shown) { border-color:var(--danger); }
.input-suffix { display:flex; }
.input-suffix input { min-width:0; border-radius:8px 0 0 8px; }
.input-suffix span { display:grid; place-items:center; flex:none; padding:0 10px; color:var(--muted); background:#e9e2d6; border:1px solid #a99e8b; border-left:0; border-radius:0 8px 8px 0; font-size:.82rem; }
.required { color:var(--danger); }
.subpanel { margin-top:12px; border:1px solid var(--line); border-radius:9px; }
.subpanel summary { padding:9px 12px; cursor:pointer; color:var(--navy); font-weight:700; }
.details-content { padding:4px 12px 12px; }
.stacked { display:grid; gap:12px; }
.warning,.validation-summary { margin-top:10px; padding:0; color:#71372f; background:var(--danger-bg); border:1px solid #d7a99d; border-left:4px solid var(--danger); border-radius:8px; }
.warning p { margin:3px 0 8px; }
.notice-drawer summary { padding:9px 12px; cursor:pointer; color:inherit; font-weight:700; }
.notice-drawer .drawer-content { padding:0 12px 11px; }
.notice-drawer .drawer-content > :last-child { margin-bottom:0; }
.check-row { display:flex; gap:9px; align-items:flex-start; font-size:.9rem; cursor:pointer; }
.check-row input { flex:none; width:18px; min-height:18px; margin-top:3px; }
.rank-path { display:grid; gap:8px; }
.rank-card { padding:10px; background:#f5f1e8; border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:9px; }
.rank-card h3 { margin-bottom:4px; }.rank-card .form-grid { gap:8px; }
.acknowledgement { margin-top:10px; padding:10px; background:var(--gold-light); border:1px solid #d3b78c; border-radius:9px; }
.button-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.button { min-height:42px; padding:8px 14px; border:1px solid transparent; border-radius:8px; cursor:pointer; font-weight:700; }
.button.primary { color:#fff; background:var(--blue); }
.button.secondary { color:var(--navy); background:#fffdf8; border-color:#a99e8b; }
.button.ghost { color:var(--blue); background:transparent; }
.button.small { min-height:36px; padding:6px 11px; font-size:.84rem; }
.inline-heading { margin-top:20px; }
.table-wrap { max-width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:10px; -webkit-overflow-scrolling:touch; }
table { width:100%; min-width:1100px; border-collapse:collapse; font-size:.82rem; white-space:nowrap; }
.compact-table table { min-width:650px; }
th,td { padding:10px 11px; text-align:left; border-bottom:1px solid var(--line); }
th { color:var(--navy); background:#e4e8da; font-weight:700; }
tbody tr:nth-child(even) { background:#f7f3eb; }
.empty-cell { padding:24px; color:var(--muted); text-align:center; }
.assumption-box { margin-top:10px; padding:0; color:var(--ink); background:var(--blue-light); border:1px solid #b9c7ae; border-radius:9px; }
.assumption-box ul { margin:4px 0 0; padding-left:22px; }
.result-heading { margin-bottom:20px; }
.summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.summary-grid article { min-width:0; padding:15px; background:#f5f1e8; border:1px solid var(--line); border-radius:10px; }
.summary-grid span,.summary-grid small { display:block; color:var(--muted); font-size:.78rem; }
.summary-grid strong { display:block; margin:5px 0 2px; color:var(--navy); font-size:1.15rem; overflow-wrap:anywhere; }
.summary-grid .accent-card { background:var(--navy); border-color:var(--navy); }
.summary-grid .accent-card span,.summary-grid .accent-card small { color:#e8e2d5; }
.summary-grid .accent-card strong { color:#fff; }
.rank-summary { margin-top:16px; padding:16px; background:var(--gold-light); border:1px solid #d3b78c; border-radius:10px; }
.rank-summary dl { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0; }
.rank-summary dl div { padding-left:10px; border-left:3px solid var(--gold); }
.rank-summary dt { font-size:.8rem; color:var(--muted); }
.rank-summary dd { margin:2px 0 0; font-weight:700; }
.tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; margin-top:24px; overflow:visible; }
.tabs button { min-width:0; padding:10px 8px; color:var(--muted); background:#f7f3eb; border:1px solid var(--line); border-bottom:3px solid var(--line); border-radius:9px; cursor:pointer; font-weight:700; text-align:center; white-space:normal; box-shadow:0 2px 7px rgba(57,48,35,.06); }
.tabs button[aria-selected="true"] { color:var(--blue); background:var(--blue-light); border-color:#9eae91; border-bottom-color:var(--blue); }
.tab-panel { width:100%; min-width:0; padding-top:20px; }
.result-card-wrap { width:100%; max-width:100%; overflow:visible; border:0; }
.result-card-table { display:block; width:100%; max-width:100%; min-width:0; white-space:normal; }
.result-card-table thead { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; }
.result-card-table tbody { display:grid; grid-template-columns:1fr; gap:14px; width:100%; }
.result-card-table tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; min-width:0; overflow:hidden; background:#fffdf8; border:1px solid var(--line); border-radius:10px; box-shadow:0 3px 12px rgba(57,48,35,.08); }
.result-card-table tbody tr:nth-child(even) { background:#fffdf8; }
.result-card-table tbody td { display:grid; grid-template-columns:minmax(120px,40%) minmax(0,1fr); gap:10px; align-items:start; width:100%; padding:8px 11px; white-space:normal; overflow-wrap:anywhere; }
.result-card-table tbody td::before { content:attr(data-label); color:var(--muted); font-size:.78rem; font-weight:700; }
.result-card-table tbody td:first-child { color:var(--navy); background:#e4e8da; font-weight:700; }
.result-card-table tbody td.empty-cell { display:block; grid-column:1/-1; padding:24px; text-align:center; }
.result-card-table tbody td.empty-cell::before { content:none; }
.annual-card-table tbody td:last-child { color:var(--navy); background:var(--gold-light); font-weight:700; }
.panel-heading p,.export-panel p { margin-bottom:14px; color:var(--muted); font-size:.87rem; }
.timeline { display:grid; gap:0; margin:18px 0 0; padding:0; list-style:none; }
.timeline li { position:relative; margin-left:9px; padding:0 0 22px 26px; border-left:2px solid #a8b49c; }
.timeline li > div { min-width:0; }
.timeline li span { display:block; overflow-wrap:anywhere; }
.timeline li::before { content:""; position:absolute; left:-7px; top:4px; width:12px; height:12px; background:var(--blue); border:3px solid #fff; border-radius:50%; box-shadow:0 0 0 1px var(--blue); }
.empty-state { margin:0; color:var(--muted); font-style:italic; }
.export-panel { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-top:24px; padding:18px; background:#f2eee5; border:1px solid var(--line); border-radius:10px; }
.export-panel .button-row { margin-top:0; }
.disclaimer { padding:0; color:#60452f; background:var(--gold-light); border-color:#d3b78c; box-shadow:none; }
.disclaimer summary { font-size:1rem; }
.disclaimer p:last-child { margin-bottom:0; }
footer { padding:20px 0; color:#e2ddd1; background:var(--navy); text-align:center; font-size:.82rem; }
footer p { margin:0; }
.site-credit { margin-top:4px; color:#c9c2b5; font-size:.68rem; letter-spacing:.03em; opacity:.82; }
.floating-credit { display:none; }
@media (min-width:901px) { .floating-credit { position:fixed; z-index:30; top:50%; left:8px; display:block; padding:10px 7px; color:var(--navy); background:rgba(251,248,241,.96); border:1px solid var(--line); border-radius:9px; box-shadow:0 5px 18px rgba(57,48,35,.14); font-size:.68rem; letter-spacing:.03em; writing-mode:vertical-rl; transform:translateY(-50%) rotate(180deg); } }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
[hidden] { display:none!important; }
@media (max-width:900px) { .three-cols { grid-template-columns:repeat(2,minmax(0,1fr)); } .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .export-panel { display:block; } .export-panel .button-row { margin-top:14px; } }
@media (max-width:620px) { .container { width:min(100% - 20px,1240px); } .site-header { padding:24px 0 22px; } .header-inner,.section-heading,.inline-heading,.panel-heading { display:block; } .header-actions { justify-content:flex-start; margin-top:12px; } .policy-badge,.status-badge { margin-top:0; } .calculator-panel,.results,.disclaimer { padding:15px; border-radius:10px; } .step-nav { display:flex; overflow-x:auto; padding-bottom:4px; } .step-nav a { flex:0 0 138px; } .step-card { padding:14px; } .three-cols,.two-cols { grid-template-columns:1fr; } .summary-grid { grid-template-columns:1fr 1fr; gap:8px; } .summary-grid article { padding:12px; } .rank-summary dl { grid-template-columns:1fr 1fr; } .inline-heading .button { margin:10px 0 12px; } .button-row .button { flex:1 1 160px; } .tabs button { padding:9px 5px; } .result-card-table tbody tr { grid-template-columns:1fr; } .result-card-table tbody td { grid-template-columns:minmax(98px,40%) minmax(0,1fr); padding:8px 9px; } }
@media (max-width:360px) { body { font-size:15px; } .container { width:calc(100% - 12px); } .calculator-panel,.results,.disclaimer { padding:11px; } .step-card { padding:11px; } .summary-grid { grid-template-columns:1fr; } .rank-summary dl { grid-template-columns:1fr; } input,select { font-size:16px; } .button-row .button { flex-basis:100%; } }
@media print { @page { size:A4 landscape; margin:10mm; } body { color:#000; background:#fff; font-size:10pt; } .site-header { padding:12px 0; color:#000; background:#fff; border-bottom:2px solid #000; } .site-header .eyebrow,.lead { color:#333; } .container { width:100%; } .calculator-panel,.step-nav,.tabs,.export-panel,footer,.skip-link,.floating-credit { display:none!important; } .results,.disclaimer { padding:0; border:0; box-shadow:none; } .tab-panel[hidden] { display:block!important; } .tab-panel { break-before:auto; margin-top:14px; } .summary-grid { grid-template-columns:repeat(4,1fr); } .table-wrap { overflow:visible; border-color:#777; } table { min-width:0; white-space:normal; font-size:7pt; } th,td { padding:4px; border-color:#aaa; } .disclaimer { margin-top:14px; padding:10px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { animation:none!important; transition:none!important; } }