/* 크라우니디자인표준2026 — 모노톤, Pretendard, 라이트/다크 */
:root{ --bg:#faf8f3; --card:#fff; --ink:#1a1a1a; --sub:#6b6b6b; --accent:#3a3a3a; --accent2:#6b6b6b; --line:#e8e4da; --ok:#2f7d57; --font:-apple-system,"Pretendard","Apple SD Gothic Neo",system-ui,sans-serif; --danger:#b23b3b; }
@media(prefers-color-scheme:dark){:root{--bg:#16140f;--card:#1d1a14;--ink:#ececec;--sub:#9a958c;--accent:#cfcabb;--accent2:#9a958c;--line:#2a2a2a;--ok:#5bbd8e;--font:-apple-system,"Pretendard","Apple SD Gothic Neo",system-ui,sans-serif; --danger:#e08a8a}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.65;-webkit-tap-highlight-color:transparent}
svg.ci{vertical-align:-0.18em}
#app{max-width:560px;margin:0 auto;padding:24px 18px 60px;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px 26px;box-shadow:0 6px 24px rgba(0,0,0,.06)}
.center{text-align:center}
.hidden{display:none}
.logo{font-size:58px;margin-bottom:6px}
h1{font-size:28px;margin:.2em 0}
h2.qtext{font-size:25px;line-height:1.45;margin:14px 0 22px;word-break:keep-all}
.sub{color:var(--sub);margin:.4em 0 1.2em}
.project{font-weight:700;color:var(--accent);font-size:20px;margin:.2em 0 1em}
input{width:100%;padding:16px 18px;margin:8px 0;border:2px solid var(--line);border-radius:14px;font-size:19px;background:var(--card)}
input:focus{outline:none;border-color:var(--accent)}
button,.big{cursor:pointer;font-family:inherit}
.big{display:block;width:100%;padding:18px;margin:10px 0;border-radius:16px;font-size:20px;font-weight:700;border:2px solid transparent;text-align:center;text-decoration:none}
.primary{background:var(--accent);color:#fff}
.primary:active{transform:scale(.98)}
.ghost{background:#fff;color:var(--sub);border:2px solid var(--line);padding:12px 16px;border-radius:14px;font-size:16px}
.msg{color:var(--danger);min-height:1.4em;font-size:16px}
.bar{height:14px;background:var(--line);border-radius:10px;overflow:hidden}
.fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--ok));transition:width .4s ease}
.prog{font-size:15px;color:var(--sub);margin:10px 0 0}
.tag{background:var(--line);padding:3px 10px;border-radius:20px;font-size:14px}
.qarea{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.opt{padding:18px;border:2px solid var(--line);border-radius:16px;background:var(--card);font-size:20px;text-align:center;transition:.15s}
.opt:hover{border-color:var(--accent)}
.opt.yes{border-color:#cfe6d8}.opt.no{border-color:#f0d8d8}
.opt.sel{background:var(--accent);color:#fff;border-color:var(--accent)}
.multi .opt.sel{background:var(--accent)}
.row{display:flex;gap:10px;justify-content:space-between;margin-top:18px}
.row .ghost{flex:1}
.spec{text-align:left;background:#faf8f2;border:1px solid var(--line);border-radius:14px;padding:16px;max-height:50vh;overflow:auto;font-size:14px;white-space:pre-wrap;word-break:break-word}
.confirm{display:flex;gap:10px;margin-top:8px}
.confirm .big{margin:0}