@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700;900&display=swap');

:root { --ink:#171714; --paper:#f4f0e8; --red:#ff4d32; --lime:#d8ff43; --muted:#77756e; --line:rgba(23,23,20,.17); --white:#fffdf8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans SC",system-ui,sans-serif; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; }
.noise { position:fixed; inset:0; pointer-events:none; opacity:.18; z-index:20; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); }
.wrap { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.site-header { height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; font-weight:900; letter-spacing:-.03em; }
.brand-mark { display:grid; place-items:center; width:41px; height:41px; background:var(--ink); color:var(--lime); border-radius:50%; font-family:"DM Mono"; font-size:14px; transform:rotate(-7deg); }
nav { display:flex; align-items:center; gap:30px; font-size:13px; font-weight:600; }
nav a { text-decoration:none; }
.nav-pill { border:1px solid var(--ink); border-radius:100px; padding:10px 16px; }
.top-notice { background:var(--ink); color:white; border-bottom:5px solid var(--red); }
.top-notice .wrap { min-height:54px; display:flex; align-items:center; gap:18px; font-size:12px; }
.top-notice strong { flex:none; color:var(--lime); font-size:13px; letter-spacing:.05em; }
.top-notice span { color:#d0cfc7; }
.top-notice a { margin-left:auto; flex:none; color:white; font-weight:700; text-underline-offset:4px; }
.hero { min-height:660px; padding:80px 0 72px; display:grid; grid-template-columns:1.08fr .92fr; gap:9vw; align-items:start; }
.hero-copy { padding-top:30px; }
.eyebrow,.kicker { font-family:"DM Mono"; font-size:11px; letter-spacing:.15em; font-weight:500; }
.eyebrow { display:flex; align-items:center; gap:9px; }
.eyebrow span { width:28px; height:2px; background:var(--red); }
h1 { font-size:clamp(60px,7vw,105px); line-height:.98; letter-spacing:-.08em; margin:30px 0 26px; font-weight:900; }
h1 em { color:var(--red); font-style:normal; position:relative; }
h1 em:after { content:""; position:absolute; height:8px; left:2%; right:-3%; bottom:-6px; background:var(--red); transform:rotate(-2deg); border-radius:50%; }
.hero-copy>p { color:#57564f; font-size:17px; line-height:1.8; width:min(470px,100%); }
.hero-meta { display:flex; gap:15px; align-items:center; margin-top:44px; font:500 11px "DM Mono"; letter-spacing:.06em; }
.hero-meta i { width:4px; height:4px; background:var(--red); border-radius:50%; }
.valuation-card { background:var(--white); border:1px solid var(--ink); box-shadow:10px 10px 0 var(--ink); padding:30px; position:relative; }
.card-index { position:absolute; right:24px; top:18px; color:var(--muted); font:10px "DM Mono"; }
.primary-label { display:block; font-size:13px; font-weight:700; margin:20px 0 10px; }
.qq-input-wrap { height:77px; display:flex; align-items:center; border-bottom:3px solid var(--ink); }
.input-prefix { font:500 16px "DM Mono"; color:var(--red); margin-right:18px; }
.qq-input-wrap input { width:100%; border:0; outline:0; background:transparent; font:500 clamp(26px,3vw,39px) "DM Mono"; letter-spacing:.04em; }
input::placeholder { color:#c9c6bd; }
.profile-fetch { width:100%; border:1px solid var(--line); background:#f7f4ed; margin:21px 0; padding:12px; display:flex; align-items:center; text-align:left; cursor:pointer; gap:12px; }
.fetch-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--lime); }
.profile-fetch span:nth-child(2) { display:flex; flex-direction:column; flex:1; }
.profile-fetch b { font-size:12px; }.profile-fetch small { color:var(--muted); margin-top:2px; font-size:10px; }
.fetch-status { font:10px "DM Mono"; color:var(--muted); }
.field-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:13px; }
.field-grid label,.nickname-field { display:flex; flex-direction:column; gap:7px; font-size:11px; font-weight:600; }
label small { color:var(--muted); font-weight:400; }
.field-grid input,.nickname-field input { border:1px solid var(--line); background:white; padding:12px; outline:none; min-width:0; }
.field-grid input:focus,.nickname-field input:focus { border-color:var(--ink); }
.nickname-field { margin-top:13px; }
.form-message { min-height:18px; margin:8px 0 0; color:#c52f1b; font-size:11px; }
.submit-button { width:100%; display:flex; align-items:center; justify-content:space-between; border:0; background:var(--red); color:white; cursor:pointer; padding:17px 20px; font-weight:800; box-shadow:4px 4px 0 var(--ink); transition:.18s; }
.submit-button:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }.submit-button:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.submit-button b { font-size:22px; }
.card-notice { margin-top:17px; padding:11px 12px; display:flex; gap:10px; align-items:center; background:#fff0ec; border:1px solid #f2a092; color:#6c2b20; }
.card-notice>b { width:23px; height:23px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--red); color:white; font:700 13px "DM Mono"; }
.card-notice span { display:flex; flex-direction:column; font-size:9px; line-height:1.5; }.card-notice strong { font-size:11px; color:#a22412; }
.result-section { padding:90px 0; border-top:1px solid var(--line); }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:35px; }
.section-heading h2,.certificate-panel h2,.disclaimer h2 { font-size:clamp(36px,5vw,60px); margin:8px 0 0; letter-spacing:-.06em; line-height:1.04; }
.section-heading>p { color:var(--muted); font-size:13px; }
.text-button { border:0; padding:7px 0; border-bottom:1px solid; background:transparent; cursor:pointer; font-size:12px; font-weight:700; }
.report-grid { display:grid; grid-template-columns:.83fr 1.17fr; border:1px solid var(--ink); box-shadow:8px 8px 0 var(--ink); }
.identity-card { padding:36px; background:var(--ink); color:white; }
.identity-top { display:flex; gap:17px; align-items:center; }.identity-top img { width:70px; height:70px; object-fit:cover; border-radius:50%; background:#34342f; border:2px solid var(--lime); }
.identity-top span { font:10px "DM Mono"; color:#aaa99f; letter-spacing:.12em; }.identity-top h3 { font:500 24px "DM Mono"; margin:6px 0 3px; }.identity-top p { margin:0; color:#aaa99f; font-size:12px; }
.price-block { margin:50px 0; }.price-block>span { font-size:12px; color:#aaa99f; }.price-block strong { display:block; color:var(--lime); font:500 clamp(54px,6vw,82px) "DM Mono"; letter-spacing:-.07em; }.price-block strong small { font-size:.3em; vertical-align:top; margin-right:5px; }.price-block p { display:inline-block; color:var(--ink); background:var(--lime); margin:4px 0 0; padding:5px 8px; font-size:11px; font-weight:800; transform:rotate(-1deg); }
.quick-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #3f3f39; padding-top:23px; }.quick-stats div { display:flex; flex-direction:column; }.quick-stats span { font-size:10px; color:#88877f; }.quick-stats b { margin-top:5px; font:500 14px "DM Mono"; }
.breakdown-card { background:var(--white); padding:36px; }.breakdown-card h3 { margin:0 0 25px; font-size:19px; }
.score-row { display:flex; justify-content:space-between; align-items:center; padding:15px 0; border-bottom:1px solid var(--line); }.score-row div { display:flex; flex-direction:column; }.score-row span { font-size:13px; font-weight:700; }.score-row small { margin-top:4px; color:var(--muted); font-size:10px; }.score-row>b { font:500 17px "DM Mono"; }
.formula { display:flex; align-items:center; gap:10px; padding:20px 0; flex-wrap:wrap; }.formula span { font-size:10px; color:var(--muted); }.formula b { font:500 14px "DM Mono"; }.formula i { color:var(--red); font-style:normal; }
.bonus-head { display:flex; justify-content:space-between; font-size:11px; font-weight:700; margin:6px 0 10px; }.bonus-head small { color:var(--muted); }
.bonus-list { display:flex; gap:7px; flex-wrap:wrap; }.bonus { padding:7px 9px; background:#e9e5dc; font-size:10px; }.bonus b { color:var(--red); margin-left:5px; }
.certificate-panel { display:grid; grid-template-columns:.7fr 1.3fr; gap:70px; align-items:center; margin-top:100px; padding:65px; background:#dbff51; border:1px solid var(--ink); }
.certificate-panel p { color:#4f523c; line-height:1.8; font-size:13px; margin:23px 0 31px; }.certificate-panel .submit-button { background:var(--ink); }.certificate-panel .text-button { margin-top:17px; }
.canvas-wrap { background:#20201c; padding:18px; transform:rotate(1.3deg); box-shadow:13px 13px 0 rgba(0,0,0,.18); }.canvas-wrap canvas { display:block; width:100%; height:auto; background:#eee; }
.rules-section { padding:105px 0; }.rule-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--ink); }.rule-grid article { padding:25px; min-height:245px; border-right:1px solid var(--ink); display:flex; flex-direction:column; }.rule-grid article:last-child { border:0; }.rule-no { font:11px "DM Mono"; color:var(--red); }.rule-grid h3 { margin:35px 0 12px; font-size:18px; }.rule-grid p { margin:0; font-size:12px; color:var(--muted); line-height:1.7; }.rule-grid b { margin-top:auto; font:500 12px "DM Mono"; }.rule-grid .dark-rule { background:var(--ink); color:white; }.dark-rule p { color:#aaa99f; }.dark-rule b { color:var(--lime); }
.rule-details { border-bottom:1px solid var(--ink); }.rule-details summary { list-style:none; padding:24px 4px; cursor:pointer; display:flex; justify-content:space-between; font-size:13px; font-weight:700; }.rule-details summary::-webkit-details-marker { display:none; }.rule-details[open] summary b { transform:rotate(45deg); }.rule-table { padding-bottom:25px; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); }.rule-table div { background:var(--paper); padding:15px; display:flex; justify-content:space-between; gap:20px; font-size:11px; }.rule-table small { color:var(--muted); }.rule-table b { color:var(--red); white-space:nowrap; }
.disclaimer { background:#ff4d32; color:white; border:3px solid var(--ink); box-shadow:10px 10px 0 var(--ink); padding:45px; display:grid; grid-template-columns:70px .8fr 1.2fr; gap:30px; align-items:start; margin-bottom:95px; }.warning-mark { width:50px; height:50px; display:grid; place-items:center; background:var(--ink); color:var(--lime); font:500 27px "DM Mono"; border-radius:50%; }.disclaimer .kicker { color:#5f160d; }.disclaimer h2 { font-size:35px; }.disclaimer-copy { font-size:13px; color:#fff8f5; line-height:1.75; }.disclaimer-copy p:first-child { margin-top:0; }.disclaimer-copy strong { color:white; font-size:14px; }.disclaimer-copy .reference-note { color:#56150d; font-weight:600; }.disclaimer-copy a { display:inline-block; margin-top:8px; padding:10px 14px; background:var(--ink); color:var(--lime); font-weight:800; text-decoration:none; }
footer { height:90px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font:10px "DM Mono"; color:var(--muted); }
.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); background:var(--ink); color:white; padding:11px 18px; font-size:12px; opacity:0; pointer-events:none; z-index:50; transition:.2s; }.toast.show { opacity:1; transform:translate(-50%,0); }
#qr-render { position:fixed; left:-9999px; top:-9999px; background:white; padding:16px; }
[hidden] { display:none !important; }
@media (max-width:850px) {
  .wrap { width:min(100% - 28px,680px); }.site-header { height:75px; }nav>a:not(.nav-pill) { display:none; }.nav-pill { padding:8px 12px; }
  .top-notice .wrap { padding:10px 0; align-items:flex-start; flex-wrap:wrap; gap:4px 12px; }.top-notice span { width:calc(100% - 110px); }.top-notice a { width:100%; margin-left:0; font-size:10px; }
  .hero { grid-template-columns:1fr; gap:40px; padding-top:40px; }.hero-copy { padding-top:0; }h1 { font-size:clamp(56px,17vw,90px); }.hero-copy>p { font-size:15px; }.valuation-card { box-shadow:6px 6px 0 var(--ink); padding:22px; }
  .result-section { padding:65px 0; }.report-grid { grid-template-columns:1fr; }.identity-card,.breakdown-card { padding:27px; }.certificate-panel { grid-template-columns:1fr; padding:35px 25px; gap:40px; margin-top:65px; }
  .rules-section { padding:75px 0; }.rule-grid { grid-template-columns:1fr 1fr; }.rule-grid article:nth-child(2) { border-right:0; }.rule-grid article:nth-child(-n+2) { border-bottom:1px solid var(--ink); }.rule-table { grid-template-columns:1fr; }
  .disclaimer { grid-template-columns:55px 1fr; padding:28px 22px; }.disclaimer-copy { grid-column:1/-1; }.section-heading>p { display:none; }
}
@media (max-width:520px) {
  .brand>span:last-child { font-size:13px; }nav { gap:8px; }.hero { padding-top:25px; }.hero-meta { gap:9px; font-size:9px; }.field-grid { grid-template-columns:1fr 1fr; }.card-index { display:none; }
  .rule-grid { grid-template-columns:1fr; }.rule-grid article { min-height:205px; border-right:0; border-bottom:1px solid var(--ink) !important; }.rule-grid article:last-child { border-bottom:0 !important; }
  .quick-stats { gap:8px; }.certificate-panel { margin-inline:-1px; }.section-heading h2 { font-size:40px; }.disclaimer { grid-template-columns:1fr; }.warning-mark { display:none; }.disclaimer-copy { grid-column:auto; }footer { height:auto; padding:25px 0; gap:10px; flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }* { transition:none !important; } }