@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;700&display=swap');
#hg-placement{--ink:#172c28;--muted:#66736b;--paper:#f8f7f1;--green:#254d3e;--lime:#d5ee8d;--line:#dce0d4;--orange:#ff805a;--ko:'Noto Sans KR',sans-serif;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.6;isolation:isolate;text-align:left;border-radius:24px;overflow:hidden;width:100%;position:relative}
#hg-placement *{box-sizing:border-box}
#hg-placement [hidden]{display:none!important}
#hg-placement :is(h1,h2,h3,p){margin:0;color:inherit}
#hg-placement :is(h1,h2,h3){font-family:Manrope,sans-serif;line-height:1.12;letter-spacing:-.055em;font-weight:800}
#hg-placement button,#hg-placement a{font:inherit;-webkit-tap-highlight-color:transparent}
#hg-placement button{cursor:pointer;text-transform:none;letter-spacing:normal;min-height:44px;box-shadow:none}
#hg-placement button:disabled{cursor:default;opacity:.5}
#hg-placement a{color:inherit;text-decoration:none}
#hg-placement :focus-visible{outline:3px solid #bc5b22;outline-offset:5px}
#hg-placement [lang=ko]{font-family:var(--ko);letter-spacing:normal}
#hg-placement .hg-wrap{width:min(1160px,100% - 80px);margin:auto}
#hg-placement .hg-nav{display:flex;justify-content:space-between;align-items:center;padding:27px 0;border-bottom:1px solid var(--line);gap:20px}
#hg-placement .hg-brand{display:flex;align-items:center;flex:0 1 210px;max-width:210px}
#hg-placement .hg-logo{display:block;width:210px;max-width:100%;height:auto}
#hg-placement .hg-nav-title{display:flex;align-items:center;gap:12px;font-family:Manrope,sans-serif;font-size:18px;font-weight:800;letter-spacing:-.03em}
#hg-placement .hg-flag{display:grid;place-items:center;width:52px;height:48px;flex-shrink:0;background:#fffefb;border:1px solid var(--line);border-radius:13px;font-size:28px;transform:rotate(-8deg);animation:hg-float 6s ease-in-out infinite;box-shadow:0 5px 12px #263d2910}
#hg-placement .hg-flag img{display:block;width:36px;height:36px;max-width:none;filter:drop-shadow(0 2px 2px #172c2820)}
#hg-placement .hg-nav-link{font-size:12px;border-bottom:1px solid var(--ink);padding:5px 0}
#hg-placement .hg-hero{display:grid;grid-template-columns:1.04fr 1fr;gap:58px;align-items:center;padding:76px 0 70px}
#hg-placement .hg-eyebrow{font-size:10px;letter-spacing:.17em;font-weight:800;text-transform:uppercase;display:flex;align-items:center;gap:9px;margin-bottom:23px}
#hg-placement .hg-dot{height:7px;width:7px;border-radius:100%;background:#669844;box-shadow:0 0 0 5px #66984415}
#hg-placement h1{font-size:clamp(42px,4.7vw,68px);line-height:1.04}
#hg-placement h1 em{font-style:normal;color:#54724b;position:relative}
#hg-placement .hg-hero-copy>p{font-size:16px;line-height:1.8;color:var(--muted);max-width:430px;margin:25px 0}
#hg-placement .hg-primary{border:0;border-radius:100px;color:white;background:var(--green);padding:17px 25px;display:inline-flex;justify-content:center;align-items:center;gap:28px;font-size:14px;font-weight:700;transition:transform .2s,box-shadow .2s;min-height:54px}
#hg-placement .hg-primary:hover{transform:translateY(-3px);box-shadow:0 9px 24px #254d3e22}
#hg-placement .hg-primary span{font-size:22px;line-height:1}
#hg-placement .hg-fine{font-size:11px;color:var(--muted);margin-top:14px}
#hg-placement .hg-resume{margin-top:12px;display:flex;gap:12px;align-items:center}
#hg-placement .hg-text-btn{padding:8px 0;border:0;background:none;color:var(--green);text-decoration:underline;font-size:12px}
#hg-placement .hg-art{position:relative;min-height:460px;border-radius:140px 140px 24px 24px;background:#e7eadf;display:flex;align-items:center;justify-content:center;perspective:1000px;background-image:radial-gradient(#71866835 1px,transparent 1px);background-size:18px 18px}
#hg-placement .hg-orbit{position:absolute;width:340px;height:340px;border:1px solid #9dad9844;border-radius:50%;transform:rotate(-20deg)}
#hg-placement .hg-orbit:after{content:'';position:absolute;inset:24px;border-radius:50%;border:1px solid #9dad9844}
#hg-placement .hg-art-tag{position:absolute;top:22px;font-size:9px;letter-spacing:.18em;color:#67745f;font-weight:700}
#hg-placement .hg-portrait{width:300px;max-width:76%;aspect-ratio:4/5;transform:rotate(-7deg);border-radius:18px;box-shadow:16px 25px 45px #2e493f30;position:relative;overflow:hidden;border:8px solid #fffefa;outline:1px solid #d3d9ca}
#hg-placement .hg-portrait img{display:block;width:100%;height:100%;object-fit:cover}
#hg-placement .hg-float-chip{position:absolute;background:#fffefa;padding:13px 18px;border-radius:12px;box-shadow:0 10px 30px #263d2914;display:flex;gap:13px;align-items:center;font-size:12px;line-height:1.35;animation:hg-float 7s ease-in-out infinite reverse}
#hg-placement .hg-float-chip small{display:block;color:var(--muted);font-size:10px;margin-top:4px}
#hg-placement .hg-chip-top{right:-12px;top:8px;transform:rotate(7deg)}
#hg-placement .hg-chip-bottom{left:-22px;bottom:65px;transform:rotate(4deg)}
#hg-placement .hg-chip-symbol{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--lime);font-size:19px}
#hg-placement .hg-stamp{position:absolute;right:10px;bottom:11px;width:100px;height:100px;background:var(--orange);border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:rotate(13deg);font-size:9px;line-height:1.5;letter-spacing:.08em}
#hg-placement .hg-stamp strong{font-size:29px;letter-spacing:-.06em}
#hg-placement .hg-wave{height:27px;display:flex;align-items:center;gap:3px}
#hg-placement .hg-wave i{width:3px;background:var(--green);border-radius:5px;height:var(--h,17px)}
#hg-placement .hg-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:25px 0;gap:20px}
#hg-placement .hg-stat{display:flex;align-items:center;justify-content:center;gap:14px}
#hg-placement .hg-stat+.hg-stat{border-left:1px solid var(--line)}
#hg-placement .hg-stat strong{font-family:Manrope,sans-serif;font-size:27px;font-weight:800;letter-spacing:-.04em}
#hg-placement .hg-stat span{font-size:11px;color:var(--muted);line-height:1.5}
#hg-placement .hg-how{padding:65px 0}
#hg-placement .hg-section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}
#hg-placement h2{font-size:clamp(28px,3vw,38px)}
#hg-placement .hg-section-heading>p{font-size:12px;color:var(--muted);max-width:260px}
#hg-placement .hg-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
#hg-placement .hg-step{padding:24px;background:#eeeee6;border:1px solid #e3e5d9;border-radius:17px}
#hg-placement .hg-step-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
#hg-placement .hg-step-icon{display:grid;place-items:center;width:44px;height:44px;background:#fffdf6;border:1px solid var(--line);border-radius:12px;font-size:23px}
#hg-placement .hg-step-top small{color:#899280;font-size:10px;letter-spacing:.12em}
#hg-placement h3{font-size:17px;letter-spacing:-.03em;margin-bottom:10px}
#hg-placement .hg-step p{font-size:12px;color:var(--muted);line-height:1.8}
#hg-placement .hg-bottom{background:var(--green);color:var(--paper);padding:32px 38px;border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:32px}
#hg-placement .hg-bottom h3{font-size:24px;margin-bottom:9px}
#hg-placement .hg-bottom p{font-size:12px;color:#cad7c7;max-width:550px}
#hg-placement .hg-lime{background:var(--lime);color:var(--ink);white-space:nowrap}
#hg-placement .hg-footer{padding:0 0 25px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted)}
#hg-placement .hg-test-shell{max-width:820px;margin:0 auto;padding:40px 0 55px;min-height:650px}
#hg-placement .hg-test-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px;color:var(--muted);margin-bottom:25px}
#hg-placement .hg-quiet{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:30px;font-size:12px;padding:8px 15px}
#hg-placement .hg-progress{height:5px;background:#e1e6d8;border-radius:8px;overflow:hidden;margin-bottom:32px}
#hg-placement .hg-progress-bar{height:100%;background:var(--green);transition:width .5s ease}
#hg-placement .hg-question{background:#fffefb;padding:38px;border:1px solid var(--line);border-radius:22px;animation:hg-enter .4s ease}
#hg-placement .hg-question-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:13px;display:flex;justify-content:space-between;gap:12px}
#hg-placement .hg-question h2{font-size:28px;letter-spacing:-.04em;line-height:1.25;outline-offset:8px}
#hg-placement .hg-context{background:#f0f3e9;padding:23px;border-radius:13px;font-size:22px;line-height:1.9;margin-top:24px;word-break:keep-all}
#hg-placement .hg-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
#hg-placement .hg-option{background:#fffefb;border:2px solid var(--line);border-bottom-width:6px;border-radius:16px;padding:17px;text-align:left;display:flex;align-items:center;gap:13px;color:var(--ink);font-size:16px;line-height:1.6;transition:background .15s,transform .15s,border-color .15s;min-height:77px}
#hg-placement .hg-option:hover:not(:disabled){background:#f4f7ee;transform:translateY(-2px);border-color:#839b75}
#hg-placement .hg-option[aria-pressed=true]{background:#eef5dd;border-color:#52713f}
#hg-placement .hg-option:active:not(:disabled){transform:translateY(3px)}
#hg-placement .hg-option b{font-size:10px;border:1px solid var(--line);width:25px;height:25px;flex-shrink:0;display:grid;place-items:center;border-radius:7px;font-weight:500}
#hg-placement .hg-option:disabled{opacity:1}
#hg-placement .hg-option.is-right{border-color:#4a7939;background:#edf5e1}
#hg-placement .hg-option.is-wrong{border-color:#ae5c47;background:#fff1e9}
#hg-placement .hg-scene{height:155px;border-radius:14px;overflow:hidden;margin-top:22px;background:#eef1e6}
#hg-placement .hg-scene img{display:block;width:100%;height:100%;object-fit:cover}
#hg-placement .hg-audio-card{display:flex;align-items:center;gap:20px;background:#eef1e6;border:1px solid #dbe3d2;border-radius:16px;padding:24px;margin-top:25px}
#hg-placement .hg-play{border:0;background:var(--green);color:white;border-radius:50%;height:58px;width:58px;flex-shrink:0;font-size:20px}
#hg-placement .hg-audio-body{flex:1}
#hg-placement .hg-audio-body strong{display:block;font-size:13px}
#hg-placement .hg-audio-body p{font-size:11px;color:var(--muted);margin-top:5px}
#hg-placement .hg-playing .hg-wave i{animation:hg-wave .6s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
#hg-placement .hg-audio-error{font-size:12px;color:#a24127;margin-top:12px}
#hg-placement .hg-builder-help{font-size:12px;color:var(--muted);margin:20px 0 15px}
#hg-placement .hg-slots{display:flex;gap:8px;min-height:85px;flex-wrap:wrap;align-items:center;background:#f0f3e9;padding:16px;border-radius:13px}
#hg-placement .hg-slot{min-width:68px;min-height:52px;border:2px solid #b2c0a7;border-bottom-width:5px;background:#fffefb;border-radius:8px;font-size:20px;padding:8px 15px;color:var(--ink)}
#hg-placement .hg-slot:empty:after{content:'+';color:#96a68d}
#hg-placement .hg-jamo-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:145px;margin:25px auto 20px}
#hg-placement .hg-jamo-grid .hg-slot{height:64px;padding:0;font-size:32px;min-width:0}
#hg-placement .hg-jamo-grid .hg-slot:last-child{grid-column:span 2}
#hg-placement .hg-tiles{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:19px}
#hg-placement .hg-tile{background:#fffdf7;border:2px solid #cbd4c2;border-bottom-width:5px;padding:9px 18px;border-radius:11px;color:var(--ink);font-size:22px;transition:transform .15s}
#hg-placement .hg-tile:hover:not(:disabled){transform:translateY(-3px)}
#hg-placement .hg-tile:disabled{opacity:.3}
#hg-placement .hg-jamo-grid .hg-slot:empty{border-style:dashed}
#hg-placement .hg-jamo-grid .hg-slot:disabled:empty{opacity:1}
#hg-placement [data-hg=tiles].is-draggable .hg-tile:not(:disabled),#hg-placement [data-hg=slots] .hg-slot:not(:disabled){touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
#hg-placement .hg-drag-source{opacity:.3}
#hg-placement .hg-slot.is-drop-target{background:#eef5dd;border-color:#52713f;outline:3px solid #d5ee8d;outline-offset:3px}
#hg-placement .hg-drag-ghost{position:fixed;z-index:20;pointer-events:none;display:grid;place-items:center;min-width:64px;height:64px;padding:8px 15px;background:#eef5dd;border:2px solid #52713f;border-bottom-width:5px;border-radius:11px;font-size:32px;font-family:var(--ko);box-shadow:0 12px 26px #172c2830;transform:translate(-50%,-50%)}
#hg-placement .hg-feedback{padding:20px 22px;margin-top:23px;border-radius:14px;background:#eff5e5;border:1px solid #d0dfba;animation:hg-enter .3s ease}
#hg-placement .hg-feedback.is-miss{background:#fff3e9;border-color:#efd6c2}
#hg-placement .hg-feedback strong{display:block;font-size:16px;margin-bottom:7px}
#hg-placement .hg-feedback p{font-size:13px;line-height:1.8}
#hg-placement .hg-feedback .hg-transcript{font-family:var(--ko);font-size:17px;padding-top:12px}
#hg-placement .hg-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px}
#hg-placement .hg-test-note{text-align:center;color:var(--muted);font-size:11px;margin-top:20px}
#hg-placement .hg-good{animation:hg-glow .6s ease}
#hg-placement .hg-miss{animation:hg-nudge .3s ease}
#hg-placement .hg-error{padding:14px;background:#fff0e7;border-radius:12px;margin:18px 0;font-size:13px}
#hg-placement .hg-result{padding:55px 0;max-width:940px;margin:auto;animation:hg-enter .5s ease}
#hg-placement .hg-result-hero{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center;margin-bottom:40px}
#hg-placement .hg-result-hero h2{font-size:43px}
#hg-placement .hg-result-hero p{color:var(--muted);font-size:14px;line-height:1.8;margin-top:20px}
#hg-placement .hg-level-medal{width:205px;height:205px;border-radius:50%;border:1px solid #a7bd86;outline:12px solid #ecf0e3;background:var(--lime);display:flex;align-items:center;justify-content:center;flex-direction:column;margin:auto;transform:rotate(7deg)}
#hg-placement .hg-level-medal small{font-size:10px;letter-spacing:.2em}
#hg-placement .hg-level-medal strong{font-family:Manrope,sans-serif;font-size:88px;line-height:1.15;letter-spacing:-.07em}
#hg-placement .hg-level-medal span{font-size:11px}
#hg-placement .hg-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:25px}
#hg-placement .hg-result-panel{border:1px solid var(--line);padding:26px;border-radius:18px;background:#fffefb}
#hg-placement .hg-result-panel h3{font-size:18px;margin-bottom:20px}
#hg-placement .hg-skill-row{margin-top:17px}
#hg-placement .hg-skill-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}
#hg-placement .hg-skill-bar{height:5px;border-radius:5px;background:#e9ecdf;overflow:hidden}
#hg-placement .hg-skill-bar i{display:block;height:100%;background:#608048}
#hg-placement .hg-next-step{display:flex;gap:12px;align-items:start;font-size:13px;margin-bottom:17px}
#hg-placement .hg-next-step b{display:grid;place-items:center;background:#eef2e5;border-radius:7px;min-width:27px;height:27px;font-size:11px}
#hg-placement .hg-result-cta{background:var(--green);border-radius:22px;padding:38px;color:#fffdf4;position:relative;overflow:hidden}
#hg-placement .hg-result-cta h3{font-size:33px;max-width:600px;margin-bottom:18px}
#hg-placement .hg-result-cta p{font-size:14px;color:#d2ddca;max-width:650px;margin-bottom:24px}
#hg-placement .hg-benefits{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:26px;font-size:11px;color:#d6e4ce}
#hg-placement .hg-result-foot{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:22px;font-size:11px;color:var(--muted)}
#hg-placement .hg-review{margin-top:25px;border-top:1px solid var(--line);padding-top:20px}
#hg-placement .hg-review summary{cursor:pointer;font-size:13px;font-weight:700;min-height:44px}
#hg-placement .hg-review-item{border-bottom:1px solid var(--line);padding:15px 0;font-size:12px}
#hg-placement .hg-review-item p{color:var(--muted);margin-top:6px}
@keyframes hg-float{50%{translate:0 -8px}
}
@keyframes hg-enter{from{opacity:0;transform:translateY(12px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes hg-wave{to{scale:1 .4}
}
@keyframes hg-glow{50%{box-shadow:0 0 0 7px #b3d68755}
}
@keyframes hg-nudge{25%{translate:-4px 0}
75%{translate:4px 0}
}
@media(min-width:1500px){#hg-placement h1{font-size:68px}
}
@media(max-width:800px){#hg-placement .hg-wrap{width:calc(100% - 40px)}
#hg-placement .hg-hero{gap:30px;padding:45px 0}
#hg-placement .hg-art{min-height:370px}
#hg-placement .hg-portrait{width:235px}
#hg-placement .hg-float-chip{padding:10px;font-size:10px}
#hg-placement .hg-chip-top{right:-5px;top:12px}
#hg-placement .hg-chip-bottom{left:-8px;bottom:60px}
#hg-placement .hg-orbit{width:260px;height:260px}
#hg-placement .hg-stamp{width:80px;height:80px}
#hg-placement .hg-nav{flex-wrap:wrap}
#hg-placement .hg-nav-title{order:3;width:100%;justify-content:center}
#hg-placement .hg-hero-copy>p{font-size:14px}
#hg-placement .hg-step{padding:18px}
#hg-placement .hg-question{padding:25px}
#hg-placement .hg-result-hero h2{font-size:34px}
}
@media(max-width:600px){#hg-placement{border-radius:0}
#hg-placement .hg-wrap{width:calc(100% - 36px)}
#hg-placement .hg-nav{padding:18px 0;gap:16px}
#hg-placement .hg-brand{flex-basis:170px;max-width:170px}
#hg-placement .hg-logo{width:170px}
#hg-placement .hg-nav-link{font-size:10px}
#hg-placement .hg-nav-title{font-size:17px}
#hg-placement .hg-hero{grid-template-columns:1fr;padding:38px 0;gap:35px}
#hg-placement h1{font-size:48px;max-width:400px}
#hg-placement .hg-hero-copy>p{max-width:360px;margin:20px 0}
#hg-placement .hg-art{min-height:345px;max-width:390px;width:100%;margin:auto}
#hg-placement .hg-chip-top{right:5px}
#hg-placement .hg-chip-bottom{left:5px}
#hg-placement .hg-stat{flex-direction:column;gap:5px;text-align:center}
#hg-placement .hg-stat strong{font-size:24px}
#hg-placement .hg-stats{padding:22px 0;gap:10px}
#hg-placement .hg-stat span{font-size:10px}
#hg-placement .hg-how{padding:38px 0}
#hg-placement .hg-section-heading{display:block}
#hg-placement .hg-section-heading>p{margin-top:15px}
#hg-placement .hg-steps{grid-template-columns:1fr}
#hg-placement .hg-step{padding:22px}
#hg-placement .hg-step-top{margin-bottom:15px}
#hg-placement .hg-bottom{display:block;padding:25px}
#hg-placement .hg-bottom .hg-primary{margin-top:23px}
#hg-placement .hg-footer{font-size:9px}
#hg-placement .hg-options{grid-template-columns:1fr;gap:9px;margin-top:22px}
#hg-placement .hg-option{min-height:66px;padding:13px;font-size:16px}
#hg-placement .hg-question{padding:22px 18px}
#hg-placement .hg-question h2{font-size:23px}
#hg-placement .hg-test-shell{padding-top:25px}
#hg-placement .hg-test-toolbar{gap:8px;font-size:11px}
#hg-placement .hg-quiet{font-size:10px;padding:7px 10px}
#hg-placement .hg-context{font-size:18px;padding:16px}
#hg-placement .hg-actions{gap:10px}
#hg-placement .hg-actions .hg-primary{padding:14px 18px;gap:13px;font-size:12px}
#hg-placement .hg-audio-card{padding:18px 14px;gap:12px}
#hg-placement .hg-audio-card>.hg-wave{display:none}
#hg-placement .hg-result{padding-top:35px}
#hg-placement .hg-result-hero{grid-template-columns:1fr;gap:32px}
#hg-placement .hg-level-medal{width:160px;height:160px;margin:15px auto}
#hg-placement .hg-level-medal strong{font-size:65px}
#hg-placement .hg-result-grid{grid-template-columns:1fr}
#hg-placement .hg-result-cta{padding:27px 23px}
#hg-placement .hg-result-cta h3{font-size:28px}
#hg-placement .hg-result-cta .hg-primary{white-space:normal;text-align:center;gap:13px}
#hg-placement .hg-result-foot{display:block}
#hg-placement .hg-result-foot p{margin-bottom:10px}
}
@media(prefers-reduced-motion:reduce){#hg-placement *,#hg-placement *:before,#hg-placement *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
#hg-placement .hg-art-tag{display:none}
#hg-placement .hg-stamp span{max-width:78px;text-align:center;font-size:7px;line-height:1.4}
#hg-placement .hg-stamp strong{font-size:27px;margin:4px 0}

#hg-placement .hg-correct-icon{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:8px;border-radius:50%;background:#d5e8c5;color:#2f7534;line-height:1;vertical-align:middle}