.st-bar{position:sticky;top:0;z-index:20;background:#fdfbf8;border-bottom:1px solid #eee3d5;padding:12px 0}
.st-bar .wrap{display:flex;align-items:center;gap:12px}
.st-track{flex:1;height:6px;background:#f0e8dc;border-radius:4px;overflow:hidden}
.st-track i{display:block;height:100%;width:0;background:#c4a882;transition:width .25s}
.st-count{font-size:13px;color:#a3957f;font-weight:700;white-space:nowrap}

.st-top{background:#f3ebe0;padding:44px 0 36px;text-align:center}
.st-top h1{font-size:24px;line-height:1.45;letter-spacing:-.6px}
.st-top p{margin-top:12px;font-size:15px;color:#7a6f61}

.q{background:#fff;border:1px solid #eee3d5;border-radius:14px;padding:18px 16px 14px;margin-bottom:12px}
.q.on{border-color:#d9c6ab}
.q .num{font-size:12px;color:#a3957f;font-weight:700;letter-spacing:.6px}
.q .txt{font-size:16.5px;margin:6px 0 14px;line-height:1.6;word-break:keep-all}
.scale{display:flex;gap:6px}
.scale label{flex:1;cursor:pointer}
.scale input{position:absolute;opacity:0;width:0;height:0}
.scale span{display:flex;align-items:center;justify-content:center;min-height:48px;border:1px solid #e2d5c3;
border-radius:9px;font-size:15px;color:#8b8177;background:#fdfbf8;transition:.15s}
.scale input:checked+span{background:#2f2b26;color:#fff;border-color:#2f2b26;font-weight:700}
.hint{display:flex;justify-content:space-between;font-size:11.5px;color:#b3a795;margin-top:8px}

.st-btn{display:block;width:100%;text-align:center;padding:18px;border-radius:11px;border:none;
font-weight:700;font-size:16.5px;font-family:inherit;cursor:pointer;text-decoration:none;margin-top:12px}
.st-dark{background:#2f2b26;color:#fff}
.st-kakao{background:#fae100;color:#3c1e1e}
.st-ghost{background:transparent;color:#7a6f61;border:1px solid #e2d5c3}
.st-err{display:none;color:#b5543f;font-size:14px;text-align:center;margin-top:12px}
.st-note{background:#f7f1e8;border-radius:11px;padding:16px 17px;font-size:14px;color:#6b6358;line-height:1.75}

#result{display:none}
.rhero{background:#f3ebe0;padding:44px 0 38px;text-align:center}
.rhero .tag{font-size:12.5px;letter-spacing:1.5px;color:#a3957f;font-weight:700}
.rhero h2{font-size:28px;margin:10px 0 8px;letter-spacing:-1px}
.rhero .line{font-size:15.5px;color:#7a6f61;word-break:keep-all}
.story p{font-size:16px;line-height:1.85;margin-bottom:14px;color:#3c372f;word-break:keep-all}
.hard{background:#fff;border:1px solid #eee3d5;border-radius:14px;padding:18px 18px 8px;margin-top:6px}
.hard div{font-size:15.5px;color:#4a443c;padding-left:16px;position:relative;margin-bottom:12px;word-break:keep-all}
.hard div:before{content:'';position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:#c4a882}
.ax{margin-bottom:16px}
.ax .h{display:flex;justify-content:space-between;font-size:14.5px;margin-bottom:7px}
.ax .h b{font-weight:700}
.ax .h span{color:#a3957f;font-size:13px}
.ax .tr{height:8px;background:#f0e8dc;border-radius:4px;overflow:hidden}
.ax .tr i{display:block;height:100%;background:#c4a882}
.ax .d{font-size:14px;color:#6b6358;margin-top:7px;word-break:keep-all}

.lock{position:relative;background:#fff;border:1px solid #eee3d5;border-radius:14px;padding:22px 20px;overflow:hidden}
.lock .blur{filter:blur(4.5px);opacity:.55;pointer-events:none;user-select:none}
.lock .blur p{font-size:15.5px;line-height:1.8;margin-bottom:10px}
.lock .over{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.5),#fff 55%);
display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 20px 22px;text-align:center}
.lock .over b{font-size:17px;display:block;margin-bottom:8px}
.lock .over span{font-size:14.5px;color:#6b6358;line-height:1.7;word-break:keep-all}

@media (max-width:380px){
  .scale span{min-height:44px;font-size:14px}
  .q .txt{font-size:15.5px}
  .rhero h2{font-size:24px}
}