:root { --ink:#171717; --paper:#fff; --line:#d7d7d7; --muted:#626b70; --green:#0b5353; --orange:#f15a24; --max:720px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { min-width:320px; margin:0; color:var(--ink); background:#f3f3f3; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; } a { color:inherit; text-decoration:none; }
.page { width:min(100%,var(--max)); margin:0 auto; background:var(--paper); }.top { display:flex; align-items:center; justify-content:space-between; min-height:72px; padding:7px 15px; border-bottom:1px solid var(--line); font-size:14px; font-weight:800; }.brand { display:flex; align-items:center; gap:10px; }.brand img { width:57px; height:57px; object-fit:contain; }.back { color:var(--green); }
.hero { padding:26px 16px 22px; border-bottom:1px solid var(--line); }.hero-grid { display:grid; grid-template-columns:126px 1fr; gap:14px; align-items:center; }.hero-grid img { width:126px; height:126px; object-fit:contain; mix-blend-mode:multiply; }.eyebrow { display:block; color:var(--muted); font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; }.hero h1 { margin:8px 0; font-size:clamp(29px,8vw,42px); letter-spacing:-.06em; line-height:1.05; }.price { margin:0; color:#363d40; font-size:15px; line-height:1.55; }.facts { display:grid; grid-template-columns:repeat(3,1fr); margin-top:20px; border:1px solid var(--line); }.facts div { min-height:62px; padding:10px; border-right:1px solid var(--line); }.facts div:last-child { border:0; }.facts b { display:block; font-size:15px; }.facts small { display:block; margin-top:4px; color:var(--muted); font-size:11px; }
.actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:16px; }.action { display:flex; min-height:50px; align-items:center; justify-content:center; padding:10px; border:1px solid; background:#fff; font-size:14px; font-weight:900; text-align:center; }.action-consult { color:var(--orange); border-color:var(--orange); }.action-purchase { color:var(--ink); border-color:#b9b9b9; }
.section { padding:25px 16px; border-bottom:1px solid var(--line); }.section h2 { margin:0 0 9px; font-size:21px; letter-spacing:-.035em; }.section p { margin:0; color:#3c454a; font-size:14px; line-height:1.7; }.checklist { display:grid; gap:8px; margin:13px 0 0; padding:0; list-style:none; }.checklist li { padding:11px 12px; border-left:3px solid var(--green); background:#f5f8f8; color:#343d41; font-size:14px; line-height:1.55; }.consult { padding:27px 16px; background:#fff; }.consult-card { display:flex; align-items:center; gap:16px; padding:16px; border:1px solid var(--line); }.consult-card img { width:118px; height:118px; padding:3px; border:1px solid #e0e0e0; object-fit:contain; }.consult-card h2 { margin:0 0 7px; font-size:21px; }.consult-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.58; }.phone { display:block; margin-top:9px; color:var(--green); font-size:14px; font-weight:900; }.notice { display:none; }
.detail-images { padding:26px 0 4px; border-bottom:1px solid var(--line); }.detail-images h2 { margin:0; padding:0 16px 12px; font-size:21px; letter-spacing:-.035em; }.detail-images p { display:none; }.detail-images figure { margin:0; }.detail-images img { display:block; width:100%; height:auto; background:#f5f5f5; }
.qr-float { position:fixed; z-index:10; top:47%; right:8px; width:56px; min-height:76px; padding:8px 4px; border:2px solid #ff610e; border-radius:28px; color:#ff610e; background:#fff; font-size:15px; font-weight:900; line-height:1.22; box-shadow:0 3px 12px rgba(0,0,0,.13); }.qr-float:focus-visible,.qr-float:hover { color:#fff; background:#ff610e; outline:3px solid rgba(255,97,14,.25); outline-offset:2px; }.qr-popover { position:fixed; z-index:11; top:50%; right:72px; width:218px; padding:14px 14px 13px; transform:translateY(-50%); border:1px solid #ddd; border-radius:16px; background:#fff; text-align:center; box-shadow:0 12px 32px rgba(0,0,0,.22); }.qr-popover[hidden] { display:none; }.qr-popover img { display:block; width:100%; aspect-ratio:1; object-fit:contain; }.qr-popover strong { display:block; margin-top:8px; font-size:16px; }.qr-popover small { display:block; margin-top:4px; color:var(--muted); font-size:11px; }.qr-close { position:absolute; top:3px; right:8px; width:26px; height:26px; border:0; color:#555; background:transparent; font-size:24px; line-height:1; }
@media (min-width:620px) { .hero,.section,.consult { padding-right:28px; padding-left:28px; }.hero-grid { grid-template-columns:165px 1fr; }.hero-grid img { width:165px; height:165px; }.facts div { padding:13px; }.consult-card { max-width:480px; } }
.detail-grid img { display:block; width:100%; height:auto; background:#f5f5f5; }
.facts { display:none; }
.detail-images h2 { display:none; }
.back { color:var(--orange); }
.qr-backdrop { position:fixed; inset:0; z-index:9; background:rgba(0,0,0,.24); }
.qr-backdrop[hidden] { display:none; }
.qr-popover a { display:inline-block; margin-top:8px; color:var(--orange); font-size:13px; font-weight:900; }
.qr-float { width:36px; min-height:48px; padding:6px 2px; border-radius:18px; font-size:11px; }
@media (max-width:619px) { .qr-float { right:5px; width:32px; min-height:42px; padding:5px 2px; border-radius:16px; font-size:10px; } }
@media (min-width:620px) {
  .qr-popover { right:60px; width:153px; padding:10px 10px 9px; border-radius:11px; }
  .qr-popover strong { margin-top:6px; font-size:11px; }
  .qr-popover small { margin-top:3px; font-size:8px; }
  .qr-popover a { margin-top:6px; font-size:9px; }
  .qr-close { top:2px; right:5px; width:19px; height:19px; font-size:18px; }
}
.official-download { display:flex; align-items:center; justify-content:center; gap:5px; padding:18px 16px 24px; color:var(--muted); background:#fff; font-size:18px; text-align:center; }
.official-download a { color:var(--orange); font-weight:900; }