*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;background:#edf3f6;color:#203143;font:16px/1.65 system-ui,sans-serif;word-break:keep-all}
nav{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;padding:13px;background:#fcfdff;border-bottom:1px solid #dbe5ed;font-size:13px}
a{color:#205b64}nav a{text-decoration:none;font-weight:750}
main{width:min(100% - 24px,560px);margin:24px auto 0}.panel{background:#fff;border:1px solid #d4e2ea;border-radius:24px;box-shadow:0 14px 38px #2d4b6715;overflow:hidden}
.cover{display:block;width:100%;height:auto}.content{padding:28px;text-align:center}.eyebrow{color:#32606f;font-weight:800;font-size:11px;letter-spacing:.18em;margin:0 0 10px}
h1,h2{line-height:1.24;letter-spacing:-.04em;margin:8px 0 16px}h1{font-size:clamp(35px,8vw,50px)}h2{font-size:clamp(24px,6vw,36px)}em{color:#285d6e;font-style:normal}
small,.note,footer{color:#536572;font-size:12px}.note{margin:20px 4px;text-align:center}
button{font:inherit;cursor:pointer;min-height:48px;touch-action:manipulation}.primary{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;border:0;border-radius:12px;background:#204b61;color:white;font-weight:750;margin:20px 0 8px;padding:12px}
button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #ae5c38;outline-offset:3px}button:hover{filter:brightness(.94)}
progress{width:100%;height:10px;accent-color:#327584;margin:2px 0 23px}
#answers{display:grid;gap:9px}#answers button{background:#f5f9fa;color:#203143;border:1px solid #ccdde6;border-radius:12px;text-align:left;padding:12px 15px}#answers button[aria-pressed=true]{border-color:#327584;background:#e1f0ee}
.quiet{background:none;border:0;color:#205b64;margin:10px 0;padding:7px 12px}.quiet:disabled{opacity:.4;cursor:default}
#symbol{font-size:66px;line-height:1;margin:20px 0}#result a{display:block}.tip{background:#f9eddf;padding:14px;border-radius:12px}.tip p{margin:4px 0}#share-status:empty{display:none}textarea{width:100%;min-height:90px;font:inherit}.ad-container{overflow:hidden}footer{text-align:center;padding:20px}
@media(max-width:450px){main{margin-top:14px}.content{padding:22px 16px}nav{gap:16px}}
/* Illustrated edition */
body{background:radial-gradient(ellipse at 75% 5%,#fff2d9,transparent 58%),#e8eef2}
nav{background:#fffdf8;border-color:#e2dcd1}
main{width:min(100% - 24px,590px)}
.panel{border-color:#e2d8ca;background:#fffdf8;box-shadow:0 18px 50px #3c3f4e19}
.cover{aspect-ratio:1.7;object-fit:cover;object-position:center 44%}
#start .content{padding-top:26px}
.eyebrow span{color:#a45637;padding:0 .2em}
h1{line-height:1.12;letter-spacing:-.055em}h1 em{color:#23556b}
.primary{background:#1c485f;box-shadow:0 3px 0 #113040;margin-bottom:12px}
.quiz-top{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left}.quiz-top p:last-child{white-space:nowrap;text-align:right}
#quiz{border-top:5px solid #28576c}#quiz h2{text-align:left}
#answers button{background:#fff;color:#263745}#answers button[aria-pressed=true]{background:#e1f0ee}
#result .portrait{width:min(100%,300px);aspect-ratio:1;margin:14px auto 20px;border-radius:18px;background-image:url(result-illustrations.webp);background-size:200% 200%;background-position:0 0}
#result .portrait[data-type="1"]{background-position:100% 0}
#result .portrait[data-type="2"]{background-position:0 100%}
#result .portrait[data-type="3"]{background-position:100% 100%}
#desc{color:#445767}
.reading{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0;text-align:left}
.reading article{padding:15px;background:#eef3f3;border-radius:12px}
.reading article+article{background:#f6eee4}
.reading strong,.tip strong{color:#254d5f;font-size:14px}
.reading p{font-size:14px;margin:5px 0 0}
.tip{text-align:left}
@media(max-width:450px){.cover{aspect-ratio:1.46}.reading{grid-template-columns:1fr}.quiz-top .eyebrow{letter-spacing:.08em}}
.ad-top{margin:0 0 16px}.ad-bottom{margin-top:22px}
.coupang-ad{margin:16px auto 0;text-align:center;overflow:hidden}
.coupang-ad p{font-size:11px;color:#536572;line-height:1.5;margin:8px 0}
.share-actions{display:grid;gap:8px;margin-top:20px}
.share-actions button{width:100%;margin:0}
.kakao-button{background:#fee500;color:#211b0d;border:0;border-radius:12px;font-weight:750;padding:12px}