main.su{flex:1;overflow-y:auto;display:flex;flex-direction:column}#phone main.su{padding-bottom:0}.su *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.su button{font-family:var(--sans);cursor:pointer}.su .step{display:none;flex-direction:column;flex:1;padding:18px 22px 26px}.su .head,.su .step.active{display:flex}.su .head{align-items:center;justify-content:center;position:relative;height:40px;margin-bottom:8px}.su .head .back{position:absolute;left:0;background:none;border:none;font-size:22px;color:var(--ink);padding:4px 10px 4px 0}.su .head .ttl{font-size:14px;font-weight:700;color:var(--ink)}.su .bar{height:5px;border-radius:999px;background:var(--line);overflow:hidden;margin-bottom:26px}.su .bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--blue));transition:width .3s ease}.su h1.q{font-size:23px;font-weight:700;text-align:center;line-height:1.6;margin-bottom:8px}.su p.sub{font-size:13px;color:var(--muted);text-align:center;margin-bottom:22px}.su .body{flex:1}.su .cta{position:fixed;left:16px;right:16px;bottom:calc(16px + var(--kb, 0px) + env(safe-area-inset-bottom));z-index:20;transition:bottom .18s ease}.su .step{padding-bottom:calc(96px + env(safe-area-inset-bottom))}.su .btn{display:block;width:100%;background:var(--pink);color:#fff;border:none;line-height:normal;font-weight:700;letter-spacing:.1em;font-size:15px;padding:16px;border-radius:14px;text-align:center;box-shadow:0 6px 16px rgba(240,100,122,.25)}.su .btn:disabled{background:#d9dee8;box-shadow:none;color:#fff}.su .btn:not(:disabled):active{background:var(--pink-deep)}.su .btn.ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink);font-weight:500;box-shadow:var(--shadow)}.su .btn+.btn{margin-top:10px}.su .opt{display:flex;align-items:center;justify-content:center;width:100%;background:#fff;border:1.5px solid var(--line);box-shadow:var(--shadow);border-radius:16px;padding:17px 18px;font-size:15.5px;font-weight:500;color:var(--ink);margin-bottom:12px;transition:border-color .12s}.su .opt.on{border-color:var(--pink);color:var(--pink);font-weight:700;background:var(--pinktile)}.su .field{width:100%;background:#fff;border:1.5px solid var(--line);box-shadow:var(--shadow);border-radius:16px;padding:16px 18px;font-size:16px;font-family:var(--sans);color:var(--ink)}.su .field:focus{outline:none;border-color:var(--blue)}.su .fieldrow{display:flex;gap:10px}.su .cc{flex:0 0 96px;display:flex;align-items:center;justify-content:center;background:#fff;border:1.5px solid var(--line);box-shadow:var(--shadow);border-radius:16px;font-size:15px;font-weight:700}.su select.field{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 24px) 55%,calc(100% - 18px) 55%;background-size:6px 6px;background-repeat:no-repeat}.su .chips{display:flex;flex-wrap:wrap;gap:10px}.su .chips .opt{width:auto;margin:0;padding:11px 18px;border-radius:999px;font-size:14px}.su .mbti{display:grid;grid-template-columns:1fr 1fr;gap:10px}.su .mbti .opt{margin:0;padding:13px 8px;font-size:13.5px;flex-direction:column;line-height:1.4}.su .mbti .opt b{font-size:15px;letter-spacing:.08em}.su .mbti .wide{grid-column:1/-1}.su .codebox{display:flex;gap:8px;justify-content:center}.su .codebox input{width:48px;height:66px;text-align:center;font-size:26px;font-weight:700;border:1.5px solid var(--line);border-radius:14px;box-shadow:var(--shadow);color:var(--ink)}.su .codebox input:focus{outline:none;border-color:var(--blue)}.su .areaopt{position:relative}.su .areaopt .rank{position:absolute;left:16px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff}.su .areaopt .rank.r1{background:var(--pink)}.su .areaopt .rank.r2{background:var(--blue)}.su .note{font-size:12px;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:12px;padding:12px 14px;margin-top:14px;margin-bottom:0}.su .welcome{justify-content:flex-end;background:radial-gradient(circle at 78% 16%,var(--tile) 0 110px,transparent 111px),radial-gradient(circle at 18% 30%,var(--pinktile) 0 90px,transparent 91px),#fff}.su .welcome .mark{margin:0 auto 26px}.su .welcome h1{font-size:26px;font-weight:700;text-align:center;line-height:1.8;margin-bottom:6px}.su .welcome .lead{font-size:13.5px;margin-bottom:30px}.su .terms,.su .welcome .lead{color:var(--muted);text-align:center}.su .terms{font-size:11.5px;margin-top:16px;line-height:1.9}.su .terms a{color:var(--blue);text-decoration:underline}.su .curate{justify-content:center;text-align:center}.su .curate h2{font-size:21px;font-weight:700;margin:22px 0 26px;line-height:1.8}.su .pct{font-size:14px;font-weight:700;color:var(--muted)}.su .checks{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px;padding:20px 22px;text-align:left;max-width:320px;margin:0 auto}.su .checks div{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);padding:7px 0}.su .checks .dotc{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:11px;color:#fff}.su .checks .done .dotc{background:var(--pink);border-color:var(--pink)}.su .checks .done{color:var(--ink)}.su .finish{justify-content:center;text-align:center}.su .finish h2{font-size:25px;font-weight:700;line-height:1.8;margin:24px 0 8px}.su .finish p{color:var(--muted);font-size:14px;margin-bottom:28px}