.ck-hero { padding-bottom: clamp(24px, 3vw, 40px); }
.kdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; vertical-align: 2px; }
.ck-section { padding-top: 0; }
.ck, .ck-result { width: min(880px, 100%); margin-inline: auto; }
.ck { background: var(--paper); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 48px); box-shadow: 0 30px 80px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.05), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
.ck-progress { display: grid; grid-auto-flow: column; gap: 8px; list-style: none; padding: 0; margin: 0 0 34px; }
.ck-progress li { height: 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.08); transition: background-color 0.4s var(--ease); }
.ck-progress li.is-done, .ck-progress li.is-now { background: var(--ck, var(--signal)); }
.ck-progress li.is-now { opacity: 0.55; }
.ck-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.ck-legend { padding: 0; font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -0.028em; line-height: 1.1; outline: none; }
.ck-n { display: block; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); margin-bottom: 8px; }
.ck-intro { margin-top: 10px; }
.field { margin-top: 30px; }
.field > label, .flabel { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.014em; margin: 0 0 12px; }
.hint { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); max-width: 46em; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--mist); font-size: 15.5px; font-weight: 500; letter-spacing: -0.01em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.chip:hover span { background: #ebebef; }
.chip input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.chip input:focus-visible + span { outline: 3px solid rgba(36, 87, 245, 0.55); outline-offset: 2px; }
.chips--wide .chip span { min-height: 48px; }

.input-unit { display: flex; align-items: center; width: 100%; max-width: 360px; height: 52px; border-radius: 14px; background: var(--mist); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); overflow: hidden; }
.input-unit:focus-within { box-shadow: inset 0 0 0 2px var(--signal); }
.input-unit input { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; background: transparent; padding: 0 16px; font: 600 19px var(--font); letter-spacing: -0.02em; color: var(--ink); outline: none; }
.input-unit input:disabled { color: var(--ink-3); }
.input-unit span { padding: 0 16px; color: var(--ink-2); font-size: 15px; white-space: nowrap; }
.tick { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.tick input { width: 18px; height: 18px; accent-color: var(--ink); }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
.grid2 > * { min-width: 0; }
@media (max-width: 640px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }

.sliders { margin-top: 26px; display: grid; gap: 18px; }
.slider-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 1.2fr) 74px; align-items: center; gap: 18px; }
.slider-row label { font-size: 16px; font-weight: 500; }
.slider-row output { font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; }
.ck input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; --fill: 0%; }
.ck input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--ck, var(--signal)) var(--fill), rgba(0, 0, 0, 0.09) var(--fill)); }
.ck input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.09); }
.ck input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--ck, var(--signal)); }
.ck input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22), inset 0 0 0 0.5px rgba(0, 0, 0, 0.1); }
.ck input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); }
@media (max-width: 640px) { .slider-row { grid-template-columns: 1fr 64px; gap: 4px 12px; } .slider-row label { grid-column: 1 / -1; } }
.ck-sum { margin-top: 22px; font-weight: 650; }

.proc-rows { margin-top: 24px; display: grid; gap: 12px; }
.proc-row { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 0.8fr)) auto; gap: 12px; align-items: end; padding: 16px 18px; border-radius: 18px; background: var(--mist); }
.proc-name { font-weight: 650; align-self: center; }
.mini { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.mini input, .mini select { height: 42px; border: 0; border-radius: 11px; background: var(--paper); padding: 0 12px; font: 600 16px var(--font); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07); width: 100%; }
.mini input:focus, .mini select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--signal); }
.proc-row .tick { margin: 0 0 10px; white-space: nowrap; }
@media (max-width: 760px) { .proc-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .proc-name, .proc-row .tick { grid-column: 1 / -1; } }

.ck-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hair); }
.ck-error { margin-top: 24px; padding: 14px 18px; border-radius: 14px; background: rgba(201, 55, 44, 0.08); color: #9b2a21; font-weight: 500; }


.ck-result { outline: none; }
.res-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.res-head .link { background: none; border: 0; cursor: pointer; font-size: 17px; padding: 0; }
.stats { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stat { background: var(--mist); border-radius: var(--r-lg); padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 8px; }
.stat:first-child { background: var(--ink); color: #fff; }
.stat:first-child .stat-u { color: rgba(255, 255, 255, 0.7); }
.stat-v { font-size: clamp(28px, 3.1vw, 40px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-u { font-size: 15px; color: var(--ink-2); line-height: 1.35; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; } }
.res-note { margin-top: 16px; font-size: 14.5px; color: var(--ink-2); max-width: 52em; }
.res-h { margin-top: 56px; }
.res-h + .muted { margin-top: 8px; }
.top { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.top-card { position: relative; background: var(--paper); border-radius: var(--r-lg); padding: 26px 24px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07); }
.top-rank { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ck, var(--signal)); color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 16px; }
.top-card h4 { font-size: 19px; font-weight: 650; letter-spacing: -0.016em; }
.top-card p { margin-top: 8px; color: var(--ink-2); font-size: 15.5px; }
.top-card .top-save { color: var(--ink); font-weight: 650; }
.top-card .top-need { font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 860px) { .top { grid-template-columns: 1fr; } }
.pm { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pm-box { padding: 6px 10px; border-radius: 9px; background: var(--mist); font-size: 12.5px; font-weight: 600; }
.pm-arrow { width: 22px; height: 2px; background: var(--ink-3); position: relative; font-size: 0; }
.pm-arrow--copy { width: auto; height: auto; background: none; font-size: 12px; color: var(--bad); font-weight: 650; }
.pm-arrow--copy::before { content: "✎ "; }

.fl { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.fi { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; padding: 16px 18px; border-radius: 16px; background: var(--mist); }
.fi-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.fi-ic svg { width: 15px; height: 15px; }
.fi--good .fi-ic { background: var(--good); }
.fi--warn .fi-ic { background: var(--warn); }
.fi--bad .fi-ic { background: var(--bad); }
.fi--info .fi-ic { background: #a1a1a6; }
.fi b { font-weight: 600; display: block; line-height: 1.35; padding-top: 3px; }
.fi p { margin-top: 4px; color: var(--ink-2); font-size: 15px; }

.ck-scan { margin-top: 56px; padding: clamp(24px, 4vw, 40px); border-radius: var(--r-xl); background: #f3f3f6; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ck, var(--signal)) 16%, #fff), #f5f5f7 60%); }
.ck-scan .muted { margin-top: 8px; max-width: 40em; }
.scan-form { margin-top: 22px; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 20px; border-radius: 999px; max-width: 560px; }
.scan-form input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; font: 500 17px var(--font); color: var(--ink); outline: none; }
.scan-form:focus-within { box-shadow: var(--glass-ring), 0 0 0 3px rgba(36, 87, 245, 0.35), var(--glass-drop); }
.scan-out:empty { display: none; }
.scan-out { margin-top: 24px; }
.scan-site { display: flex; flex-direction: column; gap: 2px; }
.scan-site span { color: var(--ink-3); font-size: 14px; word-break: break-all; }
.scan-wait { display: flex; align-items: center; gap: 12px; color: var(--ink-2); }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.12); border-top-color: var(--ink); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ck-scan .fi { background: rgba(255, 255, 255, 0.72); }

.res-cta { margin-top: 56px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 30px 32px; border-radius: var(--r-xl); background: var(--ink); color: #fff; }
.res-cta .muted { color: rgba(255, 255, 255, 0.7); margin-top: 6px; }
.res-how { margin-top: 28px; border-top: 1px solid var(--hair); }
.res-how summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 600; font-size: 17px; }
.res-how summary::-webkit-details-marker { display: none; }
.res-how summary::after { content: " +"; color: var(--ink-3); }
.res-how[open] summary::after { content: " –"; }
.res-how p { margin-top: 14px; color: var(--ink-2); font-size: 15px; max-width: 56em; }
.how { width: 100%; border-collapse: collapse; font-size: 15px; }
.how th, .how td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair); }
.how th { font-weight: 600; color: var(--ink-2); font-size: 13px; }
.how td:not(:first-child), .how th:not(:first-child) { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) { .how { font-size: 13.5px; } .how th:nth-child(3), .how td:nth-child(3) { display: none; } }