:root {
  color-scheme: light;
  --navy: #071b3b;
  --blue: #123fd6;
  --yellow: #ffd84d;
  --ink: #10203b;
  --muted: #66758d;
  --line: #dbe3ee;
  --surface: #ffffff;
  --bg: #f4f7fb;
  --product: #d97706;
  --product-soft: #fff7e6;
  font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

body[data-product="card"] { --product: #d97706; --product-soft: #fff7e6; }
body[data-product="flyer"] { --product: #0284c7; --product-soft: #eaf7ff; }
body[data-product="pp"] { --product: #7c3aed; --product-soft: #f3efff; }
body[data-product="vinyl"] { --product: #dc2626; --product-soft: #fff0f0; }
body[data-product="pvc"] { --product: #059669; --product-soft: #eafaf4; }

.site-width { width: min(1180px, calc(100% - 36px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; background: var(--yellow); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.calc-header {
  position: sticky;
  z-index: 40;
  top: 0;
  border-bottom: 1px solid rgba(219, 227, 238, .9);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
}
.header-inner { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand img { width: 46px; height: 46px; object-fit: contain; }
.brand span { display: grid; }
.brand b { font-size: 16px; letter-spacing: .03em; }
.brand small { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.header-actions { display: flex; gap: 9px; }
.ghost-button, .line-button { border-radius: 12px; padding: 11px 15px; font-size: 12px; font-weight: 900; }
.ghost-button { border: 1px solid var(--line); background: #fff; }
.line-button { background: var(--navy); color: #fff; }

.intro { display: grid; grid-template-columns: 1.15fr .65fr; align-items: end; gap: 50px; padding: 70px 0 36px; }
.eyebrow { margin: 0 0 10px; color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(38px, 5.3vw, 65px); line-height: 1.08; letter-spacing: -.04em; }
h1 em, .next-step em { color: var(--blue); font-style: normal; }
.intro > p { margin-bottom: 7px; color: var(--muted); font-size: 15px; line-height: 1.75; }

.calculator-card { overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); box-shadow: 0 26px 70px rgba(9, 35, 78, .11); }
.product-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); }
.product-tabs button { min-height: 90px; border: 0; padding: 17px; background: #fff; color: var(--ink); text-align: left; }
.product-tabs button b, .product-tabs button small { display: block; }
.product-tabs button b { font-size: 14px; }
.product-tabs button small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.product-tabs button.active { background: var(--product-soft); box-shadow: inset 0 -5px var(--product); color: var(--product); }

.calculator-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(350px, .72fr); }
.form-panel { padding: clamp(25px, 4vw, 48px); }
.result-panel { position: relative; padding: clamp(25px, 4vw, 44px); background: radial-gradient(circle at 100% 0%, rgba(19, 184, 200, .28), transparent 25rem), var(--navy); color: #fff; }
.panel-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 30px; }
.panel-heading > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: var(--product-soft); color: var(--product); font-size: 11px; font-weight: 900; }
.panel-heading h2 { margin: 0; font-size: 24px; }
.panel-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.panel-heading-light > span { background: rgba(255, 255, 255, .12); color: #84e7ef; }
.panel-heading-light p { color: #9eb2ce; }

.auto-notice { margin: -12px 0 24px; border: 1px solid #b9e1f5; border-radius: 13px; padding: 12px 14px; background: #eaf7ff; color: #075985; font-size: 12px; line-height: 1.6; }
.field-section { margin-top: 27px; }
.field-section:first-child { margin-top: 0; }
.field-section h3 { margin-bottom: 11px; font-size: 14px; }
.field-help { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.size-grid { grid-template-columns: repeat(5, 1fr); }
.choice-grid button { min-height: 62px; border: 1px solid var(--line); border-radius: 12px; padding: 11px; background: #fff; color: var(--ink); text-align: left; }
.choice-grid button b, .choice-grid button small { display: block; }
.choice-grid button b { font-size: 12px; }
.choice-grid button small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.choice-grid button.active { border-color: var(--product); background: var(--product-soft); box-shadow: inset 4px 0 var(--product); color: var(--product); }

.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; margin-top: 22px; }
.field-grid.three { grid-template-columns: repeat(3, 1fr); }
.field-grid label { color: var(--muted); font-size: 11px; font-weight: 800; }
.input-unit { display: grid; grid-template-columns: 1fr auto; overflow: hidden; margin-top: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.input-unit:focus-within { border-color: var(--product); box-shadow: 0 0 0 3px color-mix(in srgb, var(--product) 14%, transparent); }
.input-unit input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 13px; color: var(--ink); font-size: 15px; font-weight: 800; }
.input-unit i { display: flex; align-items: center; padding: 0 12px; background: #f3f6fa; color: var(--muted); font-size: 10px; font-style: normal; }

.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.check-card { display: flex; min-height: 60px; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 11px; background: #fff; cursor: pointer; }
.check-card input { width: 17px; height: 17px; accent-color: var(--product); }
.check-card span { display: grid; }
.check-card b { font-size: 12px; }
.check-card small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.check-card.standalone { margin-top: 18px; }
.rate-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 23px; border-radius: 15px; padding: 14px; background: #f5f7fb; }
.rate-preview > b { grid-column: 1 / -1; margin-bottom: 2px; font-size: 12px; }
.rate-preview span { display: flex; justify-content: space-between; gap: 10px; border-radius: 9px; padding: 8px; background: #fff; color: var(--muted); font-size: 9px; }
.rate-preview strong { color: var(--product); }

.result-product { display: grid; border-bottom: 1px solid rgba(255, 255, 255, .15); padding: 7px 0 23px; }
.result-product small { color: #7ed8ff; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.result-product b { margin: 7px 0 5px; font-size: 20px; }
.result-product span { color: #b9c9de; font-size: 11px; }
.result-details { display: flex; flex-wrap: wrap; gap: 7px; padding: 20px 0; }
.result-details span { border-radius: 99px; padding: 6px 9px; background: rgba(255, 255, 255, .1); color: #d6e1ef; font-size: 9px; }
.result-breakdown { display: grid; gap: 9px; }
.result-breakdown > div { display: flex; justify-content: space-between; gap: 20px; color: #b9c9de; font-size: 11px; }
.result-breakdown b { color: #fff; }
.grand-total { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 9px; margin-top: 25px; border-radius: 18px; padding: 20px; background: var(--yellow); color: var(--navy); }
.grand-total span { font-size: 11px; font-weight: 900; }
.grand-total strong { font-size: clamp(30px, 4vw, 43px); line-height: .95; }
.grand-total small { font-size: 11px; font-weight: 900; }
.estimate-note { margin: 16px 2px; color: #9eb2ce; font-size: 10px; line-height: 1.65; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.result-actions button, .result-actions a { min-height: 47px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 12px; padding: 12px; background: rgba(255, 255, 255, .08); color: #fff; font-size: 10px; font-weight: 900; text-align: center; }
.result-actions a { display: grid; place-items: center; background: var(--blue); }
.copy-status { margin: 10px 0 0; color: #84e7ef; font-size: 10px; }

.next-step { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; margin: 80px 0; border-radius: 28px; padding: clamp(34px, 5vw, 60px); background: #fff; box-shadow: 0 18px 50px rgba(9, 35, 78, .08); }
.next-step h2 { margin: 0; font-size: clamp(30px, 4vw, 50px); line-height: 1.15; letter-spacing: -.035em; }
.next-step a { border-radius: 14px; padding: 15px 20px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 900; }
footer { padding: 30px 0; background: var(--navy); color: #a9bad1; font-size: 11px; }
footer > div { display: flex; justify-content: space-between; }

@media (max-width: 940px) {
  .intro, .calculator-grid { grid-template-columns: 1fr; }
  .intro { gap: 18px; }
  .product-tabs { grid-template-columns: repeat(3, 1fr); }
  .size-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 620px) {
  .site-width { width: min(100% - 20px, 1180px); }
  .calc-header { position: static; }
  .header-inner { min-height: 66px; }
  .brand small, .ghost-button { display: none; }
  .line-button { padding: 10px 12px; }
  .intro { padding-top: 42px; }
  h1 { font-size: 39px; }
  .calculator-card { border-radius: 20px; }
  .product-tabs { grid-template-columns: 1fr 1fr; }
  .product-tabs button { min-height: 73px; padding: 13px; }
  .product-tabs button:last-child { grid-column: 1 / -1; }
  .form-panel, .result-panel { padding: 22px 17px; }
  .choice-grid, .size-grid { grid-template-columns: 1fr 1fr; }
  .field-grid.three { grid-template-columns: 1fr 1fr; }
  .field-grid.three label:last-child { grid-column: 1 / -1; }
  .check-grid, .rate-preview, .result-actions { grid-template-columns: 1fr; }
  .next-step { grid-template-columns: 1fr; margin: 45px 0; padding: 30px 22px; }
  footer { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
}